React Pseudo Props

Declarative pseudo classes in React through a render prop component.

Installation

yarn add react-pseudo-props

or

npm install --save react-pseudo-props

Usage

import Pseudo from 'react-pseudo-props';

<Pseudo>
  {({ hover, active, focus }) => (
    <React.Fragment>
      {hover && <div>Hovered</div>}
      {active && <div>Active</div>}
      {focus && <div>Focused</div>}
    </React.Fragment>
  )}
</Pseudo>;

Options

By default, the Pseudo component will wrap its children in a div element and listen to its events. You can prevent this div creation and specify the element to listen to by passing an elementRef prop.

import Pseudo from 'react-pseudo-props';

class Foo extends React.Component {
  constructor(props) {
    super();
    this.eRef = React.createRef();
  }
  render() {
    return (
      <div>
        <input ref={this.eRef} />
        <Pseudo elementRef={this.eRef}>
          {({ hover, active, focus }) => (
            <React.Fragment>
              {hover && <div>Hovered the input</div>}
              {active && <div>Active the input</div>}
              {focus && <div>Focused the input</div>}
            </React.Fragment>
          )}
        </Pseudo>
      </div>
    );
  }
}

Notes

• Works with React 16.3 and above.