Using OneSDK with React

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"));