JSPM

react-event-as-prop

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 352
  • Score
    100M100P100Q104047F
  • License MIT

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

Package Exports

  • react-event-as-prop
  • react-event-as-prop/lib/Hoverable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-event-as-prop) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-event-as-prop

Unix Build status Code Coverage Version

Repo on GitHub Repo on GitLab Repo on BitBucket

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