@exodus/headless-react NPM

@exodus/headless-react

The headless Exodus React SDK.

Quick Start

The first step is wrapping your app in <HeadlessProvider />. This will expose all shared and necesary utils for feature headless UI libraries to work.

import { HeadlessProvider } from '@exodus/headless-react'

// At the root of the app
const App = () => {
  return (
    <ReduxProvider store={store}>
      <HeadlessProvider
        exodus={exodus}
        adapters={adapters}
        selectors={selectors}
      >
        // {... rest of the app}
      </>
    </ReduxProvider>
  )
}

It's important <HeadlessProvider /> is inside <ReduxProvider /> as it depends on it for state UI storing

From here, any piece of UI (specially the one living on headless UI libraries) can consume hooks exposed by @exodus/headless-react:

const MyHeadlessComponent = () => {
  const exodus = useExodus()

  const selectors = useSelectors()

  const [assetName, setAssetName] = useGlobalState({
    namespace: 'my-feature',
    key: 'amount',
    defaultValue: 'bitcoin',
    persist: true,
  })

  // Business logic...
}

API Reference

`HeadlessProvider`

Props

exodus: Exodus SDK reference
adapters: Platform adapters (currenlty only storage is required)
selectors: Redux selector collection. Most likely coming from feature redux modules

`useExodus`

Arguments

None

Returns

Passed exodus SDK reference

`useSelectors`

Arguments

None

Returns

Passed selector collection

`useGlobalState`

Arguments

namespace String: Feature namespace under which this state will be stored in Redux
key String: State key under which this state will be stored in Redux
defaultValue Any: Default value of state before is first written
persist Boolean: Wether this state shuold be persisted in storage or not