@exodus/headless-react

The headless Exodus React SDK.

Table of Contents

• Quick Start
• API Reference

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

Returns

React.useState compatible API Array

• [0]: state value
• [1]: setter function