effector / effector/patronum

Operator proposal: ```toggler```

Open
#286 3 comments 3 reactions 0 assignees View on GitHub
RFC
Dominant language
TypeScript
Stars
312
Forks
48
PR merge metrics
No merged PRs in 30d

Description

A useful toggler helper that returns 3 events and a store

```ts
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,
};
};
```

```ts
export const toggler = toggler();

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

In components it would look like this:

```ts
import { useUnit } from 'effector-react';

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

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

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

Button
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.