MoOx / React Event As Prop
Licence: mit
React Higher-Order Components to get event like hover, focus, active as props
Stars: ✭ 48
Programming Languages
javascript
184084 projects - #8 most used programming language
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
// see below for more information about all PropTypes
{ ...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
// see below for more information about all PropTypes
{ ...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"
PropTypes
Here are the props injected by the HoCs:
Hoverable
hovered: PropTypes.bool,
onMouseEnter: PropTypes.func,
onMouseLeave: PropTypes.func,
Touchable
touched: PropTypes.bool,
onMouseDown: PropTypes.func,
onMouseUp: PropTypes.func,
Focusable
focused: PropTypes.bool,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].