KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

react-event-as-prop

★ 48 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-event-as-prop

[![Unix Build status](https://img.shields.io/travis/MoOx/react-event-as-prop/master.svg?branch=master&label=unix%20build)](https://travis-ci.org/MoOx/react-event-as-prop)
[![Code Coverage](https://img.shields.io/coveralls/MoOx/react-event-as-prop/master.svg)](https://coveralls.io/github/MoOx/react-event-as-prop)
[![Version](https://img.shields.io/npm/v/react-event-as-prop.svg)](https://github.com/MoOx/react-event-as-prop/blob/master/CHANGELOG.md)

[![Repo on GitHub](https://img.shields.io/badge/repo-GitHub-3D76C2.svg)](https://github.com/MoOx/react-event-as-prop)
[![Repo on GitLab](https://img.shields.io/badge/repo-GitLab-6C488A.svg)](https://gitlab.com/MoOx/react-event-as-prop)
[![Repo on BitBucket](https://img.shields.io/badge/repo-BitBucket-1F5081.svg)](https://bitbucket.org/MoOx/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

### Simple usage

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

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

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

### PropTypes

Here are the props injected by the HoCs:

#### Hoverable

```js
  hovered: PropTypes.bool,
  onMouseEnter: PropTypes.func,
  onMouseLeave: PropTypes.func,
```

### Touchable

```js
  touched: PropTypes.bool,
  onMouseDown: PropTypes.func,
  onMouseUp: PropTypes.func,
```

### Focusable

```js
  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](CHANGELOG.md)

## [LICENSE](LICENSE)

react-event-as-prop

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README