import { useEvent } from "effector-react";
since
useEvent
introduced in effector-react 20.9.0
This is API is deprecated
Prefer useUnit
hook instead.
Bind event to current scope to use in dom event handlers.
Only effector-react/scope
version works this way, useEvent
of effector-react
is a no-op and does not require Provider
with scope.
Note
Useful only if you have server-side rendering or writing tests for React-components.
Methods
useEvent(unit)
Arguments
Returns
(Function): Function to pass to event handlers. Will trigger a given unit in the current scope.
Examples
Basic Usage
import ReactDOM from "react-dom";import { createEvent, createStore, fork } from "effector";import { useStore, useEvent, Provider } from "effector-react";
const incremented = createEvent();const $count = createStore(0);
$count.on(incremented, (counter) => counter + 1);
const App = () => { const count = useStore($count); const handleIncrement = useEvent(incremented);
return ( <> <p>Count: {count}</p> <button onClick={() => handleIncrement()}>increment</button> </> );};
const scope = fork();
ReactDOM.render( <Provider value={scope}> <App /> </Provider>, document.getElementById("root"),);
useEvent(shape)
Arguments
shape
Object or array of (Event or Effect): Events or effects as values which will be bound to the currentscope
Returns
(Object or Array): List of functions with the same names or keys as an argument to pass to event handlers. Will trigger a given unit in the current scope.
Examples
Object Usage
import ReactDOM from "react-dom";import { createStore, createEvent, fork } from "effector";import { useStore, useEvent, Provider } from "effector-react";
const incremented = createEvent();const decremented = createEvent();
const $count = createStore(0);
$count.on(incremented, (counter) => counter + 1);$count.on(decremented, (counter) => counter - 1);
const App = () => { const counter = useStore($count); const handler = useEvent({ incremented, decremented }); // or const [handleIncrement, handleDecrement] = useEvent([incremented, decremented]);
return ( <> <p>Count: {counter}</p> <button onClick={() => handler.incremented()}>increment</button> <button onClick={() => handler.decremented()}>decrement</button> </> );};
const scope = fork();
ReactDOM.render( <Provider value={scope}> <App /> </Provider>, document.getElementById("root"),);