Skip to main content

@exodus/headless-react

React and Redux bindings for the Exodus SDK. Use together with @exodus/headless.

Table of Contents​

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` is an instance of `@exodus/headless` */
        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