# with-item-events

> Make any DOM events handler more powerful and Specification with simple way

Latest version **1.0.5** (published 2019-09-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install with-item-events
pnpm add with-item-events
yarn add with-item-events
bun add with-item-events
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2019-09-26 |
| First published | 2019-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 2 |
| Unpacked size | 482.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | zachyutw |
| Maintainers | zachyutw |

## Links

- npm: https://www.npmjs.com/package/with-item-events
- Repository: https://github.com/zachyutw/with-item-events
- Homepage: https://github.com/zachyutw/with-item-events#readme
- Issues: https://github.com/zachyutw/with-item-events/issues
- npm.io page: https://npm.io/package/with-item-events

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^9.1.3

## Recent versions

- 1.0.5 (latest) — 2019-09-26
- 1.0.3 — 2019-09-07
- 1.0.2 — 2019-09-07
- 1.0.1 — 2019-08-26
- 1.0.0 — 2019-08-24

## README

# with-item-events

> Make any DOM events handler more powerful and Specification with simple way

[![NPM](https://img.shields.io/npm/v/with-item-events.svg)](https://www.npmjs.com/package/with-item-events) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save with-item-events
```
## Table of Contents

- [Install](#install)
- [Quick Start](#quick-start)
- [Usage](#usage)
- [FAQ](#faq)
- [Thanks](#thanks)
- [Contributing](#contributing)
- [License](#license)

## Quick Start
```jsx
import React, { useCallback, useState } from 'react';
import withItemEvents from 'with-item-events';
const ItemOne = withItemEvents(
    (props) => {
        const { onChange, item, onTestClick, id } = props;
        return (
            <div onClick={onChange} data-id={id}>
                <p>{`Click me to show item's name`}</p>
                <p>
                    <b>{item.name}</b>
                </p>
                <div onClick={onTestClick}>
                    <p>{`Click this to show  name:value`}</p>
                    <p>{`itemPayloadId${item.id}`}</p>
                    <p>{`propId${id}`}</p>
                </div>
            </div>
        );
    },
    [ { actionType: 'onTestClick', isStopPropagation: true }, { actionType: 'onTestClick', isStopPropagation: true } ]
);
const App = () => {
    const [ { item: stateItem }, setState ] = useState({ item: {} });
    const [ { x, y }, setPoint ] = useState({});
    const _onChange = useCallback((e, data) => {
        switch (data.actionType) {
            case 'onTestClick':
                setPoint(data.point);
                break;
            default:
                setState(data);
                break;
        }
    }, []);

    return (
        <div style={{ padding: '20px' }}>
            <h2>Item</h2>
            <ItemOne name='point' value={{ x: 1, y: 2 }} onChange={_onChange} onTestClick={_onChange} actionType='deleteItem' item={{ name: 'test', id: 1 }} id='1' />
            <h2>Result</h2>
            <p>
                {`item's name:`}
                {stateItem.name}
            </p>
            <div>
                <p>
                    {`x:`}
                    {x}
                </p>
                <p>
                    {`y:`}
                    {y}
                </p>
            </div>
        </div>
    );
};
export default App;
```
## ScreenShot
* Step 1 Init state
![`Step 1`](https://i.imgur.com/L4djOVZ.png) 
* Step 2 Click name : value
![`Step 2`](https://i.imgur.com/Thzlcgi.png) 
* Step 3 Click items's name
![`Step 3`](https://i.imgur.com/xWdobqw.png) 
## Usage

NOTE: React hooks require `react` and `react-dom` version `16.8.0` or higher.

## Related projects

## Plan
* TypeScript
* validation of HOC prop 

## Change Log 
### 1.0.1
- add unit test
- add two commnad events onBlur and onFocus as default

## Thanks
This repo was setup with the help of the excellent [`create-react-library`](https://www.npmjs.com/package/create-react-library) and [`redux-react-hook`](https://github.com/facebookincubator/redux-react-hook/blob/master/README.md).

## Contributing
Zach Yu zachyu.tw@gmail.com

## License

MIT © [zachyutw](https://github.com/zachyutw)

---
_Source: https://npm.io/package/with-item-events · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._