Operator proposal: toggler

[Shiyan7]

A useful toggler helper that returns 3 events and a store

export const toggler = (defaultValue = false): TogglerInstance => {
  const open = createEvent();
  const close = createEvent();
  const toggle = createEvent();

  const $isOpen = createStore(defaultValue)
    .on(open, () => true)
    .on(close, () => false)
    .on(toggle, (v) => !v);

  return {
    open,
    close,
    toggle,
    $isOpen,
  };
};

export const toggler = toggler();

sample({
  clock: smthEvent,
  target: toggler.open
}}

In components it would look like this:

import { useUnit } from 'effector-react';

export function useToggler(togglerInstance: TogglerInstance) {
  const { $isOpen, open, close, toggle } = togglerInstance;

  return useUnit({ isOpen: $isOpen, open, close, toggle });
}

const { isOpen, open, close, toggle } = useToggler(someModel.toggler);

<button onClick={open}>Button</button>

[sergeysova]

Looks like @@unitShape can be used instead of useToggler

[sergeysova]

I propose a better name in the effector system: createToggle.

[Shiyan7]

I like)