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.

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

Gate can be used via the useGate hook or as a component with props (<Gate history={history} />). Gate stores and events can be used in the application as regular units.

Gate can have two states:

  • Open, which means mounted
  • Closed, which means unmounted

Properties

.state Store

Important

Do not modify the state value! It is a derived store and should be kept in a predictable state.

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

.open Event

Important

Do not manually call this event. It is an event that depends on a Gate’s state.

Event: Event which will be called during the gate’s mounting.

.close Event

Important

Do not manually call this event. It is an event that depends on a Gate’s state.

Event: Event which will be called during the gate’s unmounting.

.status Store

Important

Do not modify the status value! It is a derived store and should be in a predictable state.

Store<boolean>: Boolean Derived Store, which shows if the given gate is mounted.

Contributors