Gate is a hook for conditional rendering, based on the current value (or values) in props. It can solve problems such as compiling all required data when a component mounts, or showing an alternative component if there is insufficient data in props. Gate is also useful for routing or animations, similar to ReactTransitionGroup.
This enables the creation of a feedback loop by sending props back to a Store.
Gate can be integrated via the useGate hook or as a component with props. Gate stores and events function as standard units within an application.
Gate has two potential states:
- Opened, indicating the component is mounted.
- Closed, indicating the component is unmounted.
Example of using Gate as a component:
<Gate history={history} />
Properties
.state
Store
Do not modify the state
value! It is a derived store and should remain in a predictable state.
Store<Props>
: DerivedStore containing the current state of the gate. This state derives from the second argument of useGate and from props when rendering the gate as a component.
Example
import {createGate, useGate} from 'effector-react';
const Gate = createGate();
Gate.state.watch((state) => console.info("gate state updated", state));
function App() {
useGate(Gate, { props: "yep" });
return <div>Example</div>;
}
ReactDOM.render(<App />, root);
// => gate state updated { props: "yep" }
.open
Event
Do not manually invoke this event. It is an event that is triggered based on the gate’s state.
Event
.close
Event
Do not manually invoke this event. It is an event that is triggered based on the gate’s state.
Event
.status
Store
Do not modify the status
value! It is a derived store and should remain in a predictable state.
Store
Example
import {createGate, useGate} from 'effector-react';
const Gate = createGate();
Gate.status.watch((opened) => console.info("is Gate opened?", opened));
// => is Gate opened? false
function App() {
useGate(Gate);
return <div>Example</div>;
}
ReactDOM.render(<App />, root);
// => is Gate opened? true