Skip to content

Getting Started

First, install:

sh
npm i -s rxjs
npm i -s @state-adapt/core
npm i -s @state-adapt/rxjs
npm i -s @state-adapt/react

Create a file named state-adapt.ts and export watch and adapt:

typescript
import { defaultStateAdapt } from '@state-adapt/react';

export const stateAdapt = defaultStateAdapt;
export const { adapt, watch } = stateAdapt;

Provide StateAdapt in your app context:

tsx
import { AdaptContext } from '@state-adapt/react';
import { stateAdapt } from './state-adapt';
// ...
  <React.StrictMode>
    <AdaptContext.Provider value={stateAdapt}>
      <App />
    </AdaptContext.Provider>
  </React.StrictMode>
// ...

Now in a component:

tsx
import { useAdapt, useStore } from '@state-adapt/react';
import { adapt } from '/state-adapt';

const countStore = adapt(5);

export function HelloWorld {
  const [name, setName] = useAdapt('Bob');
  const [count, setCount] = useStore(countStore);
  // ...
}

Custom Configuration

In state-adapt.ts, instead of importing defaultStateAdapt, you can do this:

ts
import { configureStateAdapt } from '@state-adapt/rxjs';

export const stateAdapt = configureStateAdapt();
export const { adapt, watch } = stateAdapt;

Refer to configureStateAdapt for options.

StackBlitz Starter