TrackEventState

Sometimes it is helpful to track "on" or "off" state that is triggered via events. Tracking focus (is focused or is not focused) and hover state are two examples. This provides a consistent way to manage event on/off state. This is the underlying implementation for Focusable and Hoverable.

Using to Track Focused State

{() => {
    const StyledInput = createComponent(
      ({ focused }) => ({
        backgroundColor: focused ? 'lightblue' : 'white',
      }),
      'input',
      ['onBlur', 'onFocus', 'type'],
    )
    class TextInput extends Component {
      render() {
        const { focused } = this.props
        return (
          <TrackEventState
            eventState={focused}
            on="onFocus"
            off="onBlur"
            triggerOn={el => el.focus()}
            triggerOff={el => el.blur()}
          >
            {({ bind, eventState, ref }) => {
              return (
                <StyledInput {...bind} focused={eventState} innerRef={ref} />
              )
            }}
          
        )
      }
    }
    return (
      <SpacedGroup direction="vertical">
        <TextInput focused />
        <TextInput />
        <TextInput />
      </SpacedGroup>
    )
  }}
</Playground>

API