with-item-events

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

Install

npm install --save with-item-events

Table of Contents

• Install
• Quick Start
• Usage
• FAQ
• Thanks
• Contributing
• License

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;

ScreenShot

• Step 1 Init state
• Step 2 Click name : value
• Step 3 Click items's name

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 and redux-react-hook.

Contributing

Zach Yu [email protected]

License

MIT © zachyutw