with-data
v0.2.3
Published
A React higher order component for associating data items with components for use in event handlers for high performance user interfaces.
Downloads
11
Maintainers
Readme
with-data
A React higher order component for associating data items with components for use in event handlers for high performance user interfaces.
Install
npm i with-data
or
yarn add with-data
Use
const DataItemButton = withDataItem(
Button, // <---------- A component to wrap
['onClick'] // <------ which event handlers should be wrapped
);
const people = ['Derek', 'Jim', 'Joe', 'Mike'];
const sayName = (name: string) => alert(`Hello, ${name}`);
const App = () => {
return (
<div>
{people.map((person) => (
<DataItemButton
dataItem={person} // <------------ associate any data with this component
onClickDataItem={sayName} // <---- no need for lambda here which would otherwise cause unnecessary rerenders, data item will be passed as the first arg of the handler
>
{person}
</DataItemButton>
))}
</div>
);
};