Gate is a hook for conditional rendering, based on current value (or values) in props. An example of a problem that Gate can solve – you can put together all required data, when component was mounted. Or show another component if there is not enough data in props. Gate also looks good for Routing or animation, like ReactTransitionGroup.

This allows you to send props back to Store to create feedback loop.

Gate can be used via useGate hook or as a component with props. Gate stores and events can be used in the application as regular units.

Gate can have two states:

• Opened, which means mounted
• Closed, which means unmounted

Example of using Gate as a component:

<Gate history={history} />

Gate Properties

state

Store<Props>: DerivedStore with current state of the given gate. The state came from the second argument of useGate and from props when rendering gate as a component

Example

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: Event which will be called during gate mounting

close

Event: Event which will be called during a gate unmounting.

status

Store: Boolean DerivedStore which show if given gate is mounted.

Example

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