With-item-events NPM

with-item-events

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

Install

npm install --save with-item-events

Quick Start

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;