<RecoilURLSyncTransit>

A component from the Recoil Sync library to sync atoms using the syncEffect() or urlSyncEffect() atom effects with the browser URL.

This is identical to the <RecoilURLSync> component except that it provides built-in Transit encoding.

function RecoilURLSyncTransit(props: {
  ...RecoilURLSyncOptions,
  handlers?: Array<TransitHandler<any, any>>,
}): React.Node

• handlers - Optional array of handlers for Custom Classes. It is important that this is a stable or memoized array instance. Otherwise you may miss URL changes as the listener is re-subscribed.

---

Transit encoding is not as terse or readable as just using JSON, however it can support Map and Set JavaScript containers as well as custom user classes.

Custom Classes

Handlers for custom user classes can be defined with the handlers prop:

type TransitHandler<T, S> = {
  tag: string;
  class: Class<T>;
  write: (T) => S;
  read: (S) => T;
};

Example

class ViewState {
  active: boolean;
  pos: [number, number];
  constructor(active: boolean, pos: [number, number]) {
    this.active = active;
    this.pos = pos;
  }
  // ...
}
const viewStateChecker = custom((x) => (x instanceof ViewState ? x : null));

const HANDLERS = [
  {
    tag: 'VS',
    class: ViewState,
    write: (x) => [x.active, x.pos],
    read: ([active, pos]) => new ViewState(active, pos),
  },
];

function MyApp() {
  return (
    <RecoilRoot>
      <RecoilURLSyncTransit
        storeKey="transit-url"
        location={{part: 'queryParams', param: 'state'}}
        handlers={HANDLERS}>
        {/* children */}
      </RecoilURLSyncTransit>
    </RecoilRoot>
  );
}

const ViewState = atom<ViewState>({
  key: 'ViewState',
  default: new ViewState(true, [1, 2]),
  effects: [syncEffect({storeKey: 'transit-url', refine: viewStateChecker})],
});