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.