react-event-as-prop



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

Installation

``console
$ npm install react-event-as-prop
`

Usage

$3

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

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

style={{
...styles.main,
...hovered && styles.hovered,
}}
>
{ "Submit" }

)
}

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

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

$3

You can just pipe all HoCs !

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

const Button = ({ hovered, touched, focused, ...props }) => {
return (
// 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" }

)
}

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)))
`

$3

You can import all from the main package

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

Or you can import just one

`js
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