React Higher-Order Components to get event like hover, focus, active as props
npm install react-event-as-prop





> React Higher-Order Components to get event like hover, focus, active as props
``console`
$ npm install react-event-as-prop
`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)
`
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)))
`
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"
---
* ⇄ 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`).