react-event-as-prop

React Higher-Order Components to get event like hover, focus, active as props

Installation

$ npm install react-event-as-prop

Usage

Simple usage

import { Hoverable } from "react-event-as-prop"

const Button = ({ hovered, ...props }) => {
  return (
    <button
      // really important, it's to pass onMouseEnter & onMouseLeave
      // generated by the HoCs
      { ...props }

      style={{
        ...styles.main,
        ...hovered && styles.hovered,
      }}
    >
      { "Submit" }
    </button>
  )
}

const styles = {
  main: {
    fontWeight: "100",
  },
  hovered: {
    fontWeight: "bold",
  },
}

// ⚠️ Here is the trick
export Hoverable(Button)

Advanced Usage

You can just pipe all HoCs !

import { Hoverable, Touchable, Focusable } from "react-event-as-prop"

const Button = ({ hovered, touched, focused, ...props }) => {
  return (
    <button
      // really important, it's to pass on{Event}* generated by the HoCs
      { ...props }

      style={{
        ...styles.main,
        ...hovered && styles.hovered,
        ...touched && styles.touched,
        ...focused && styles.focused,
      }}
    >
      { "Submit" }
    </button>
  )
}

const styles = {
  main: {
    fontWeight: "100",
  },
  hovered: {
    fontWeight: "bold",
  },
  touched: {
    opacity: 0.6,
  },
  focused: {
    outline: "1px solid red",
  },
}

// ⚠️ Here is the trick
export Hoverable(Touchable(Focusable(Button)))

Imports

You can import all from the main package

import { Hoverable, Touchable, Focusable } from "react-event-as-prop"

Or you can import just one

import Hoverable from "react-event-as-prop/lib/Hoverable"

CONTRIBUTING

• ⇄ Pull/Merge requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull/Merge requests must be accompanied by passing automated tests ($ npm test).

CHANGELOG

LICENSE