Next Dapp Alpha

Next Dapp Alpha

  • Tutorial
  • Plugins
  • API
  • Github

›Core

CLI Tools

  • nextdapp

Core

  • bind
  • set
  • Global States
  • Global Functions
  • Computed Values
  • Tracker
  • global
  • conf
  • .env

Plugins

  • util
  • fb
  • account
  • web3

Global States

bind binds a component to Global States. count is not a local state. It consists globally.

set can change global states and other components get the state changes.

Global states are basically Recoil Atoms.

import { bind } from "nd"

export default bind(
  ({ set, count }) => (
    <div
      onClick={() => set((count || 0) + 1, "count")}
    >
      add count: {count || 0}
    </div>
  ),
  ["count"]
)

This is not easy to do with a bare React App.

import { bind } from "nd"

/* Counter component will get the same "count" value as the default component */
const Counter = bind(({ count }) => <span>{count || 0}</span>, ["count"])

export default bind(
  ({ set, count }) => (
    <div
      onClick={() => set((count || 0) + 1, "count")}
    >
      click to add count: <Counter />
    </div>
  ),
  ["count"]
)

You can also set an initial value on the fly. It doesn't work if the initial value is a function or an array whose first member is a function. They are recognized as "Global Functions".

import { bind } from "nd"

export default bind(
  ({ set, count }) => (
    <div
      onClick={() => set(count + 1, "count")}
    >
      add count: {count}
    </div>
  ),
  [{ "count" : 10 }]
)

Predefine global states

Global states can be predefined and initialized in /nd/init.js.

export default {
  count1 : 1,
  count2 : 2
}
← setGlobal Functions →
Next Dapp Alpha
Docs
Quick StartPluginsTodo App ExampleDFINITY ExampleAPI ReferenceTroubleshootingUpdates
Community
Discord
Contributors
More
BlogBit PluginsGitHubStar
Copyright © 2021 Warashibe, Inc.