Using OneSDK in React

❗️

Webpack

OneSDK NPM Package is currently not compatible with Webpack. If you want to build your React application, use Rollup or Vite builders.

Webpack will be supported soon.

OneSDK exposes RXJS.Observable objects that can be used to subscribe to changes to the details of the individual being onboarding.

It is helpful to define a custom hook to make working with observables more ergonomic in React codebases. React hooks are available, but it’s also very simple to write one yourself, as follows:

export const useOneSdkState = <T>(accessors: Accessors<T>): [T, (v: T) => void] => {
  const { observable, setValue, getValue } = accessors;
  const [state, setState] = useState<T>(getValue());

  useEffect(() => {
    const subscription = observable.subscribe((value) => setState(value));
    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return [state, setValue];
};

This hook can now be uses in your React application as you would use any common useState hook. Instead of the initial value, you provide the accessors for the specific value:

const [name, setName] = useOneSdkState(individual.access("name"));