react-elements-selector

React (Render Props) component to handle selection of elements

Install

yarn add react-elements-selector
npm install --save react-elements-selector

Usage

importReact,{Component,Fragment}from'react';import{render}from'react-dom';importElementsSelectorfrom'react-elements-selector';importstyledfrom'react-emotion';constitems=[{name: 'Panda',selectable: true},{name: 'Waffle',selectable: true},{name: 'PandaWaffles',selectable: false},{name: 'WafflePandas',selectable: true},{name: 'PandaWaffleWaffles',selectable: true},{name: 'WafflePandaPandas',selectable: false},{name: 'WafflePandaWaffles',selectable: true},{name: 'PandaWafflePandas',selectable: true}];constContainer=styled('div')` display: flex;`;constCard=styled('div')` width: 300px; height: 300px; background-color: lightblue; display: flex; justify-content: center; align-items: center; margin: 20px;${({ isSelected })=>isSelected&&`background-color: cadetblue;`};${({ notSelectable })=>notSelectable&&`background-color: grey;`};${({ isInRange })=>isInRange&&`background-color: chartreuse;`};`;classAppextendsComponent{render(){return(<ElementsSelectoritems={items}notSelectable={items.filter(item=>!item.selectable)}>{({items: users,
toggleSelect,
isSelecting,
isItemSelected,
itemProps,
selectedItems
})=>{return(<Fragment><Container>{users.map(user=>{return(<Cardkey={user.name}{...itemProps(user)}>{isItemSelected(user) ? (<div>Selected {user.name}</div>) : (<div>{user.name}</div>)}</Card>);})}</Container>
-- Hold down shift to select multiple boxes -- <br/><br/><buttononClick={toggleSelect}>{!isSelecting ? 'Start Selecting' : 'Cancel'}</button><br/><br/>{JSON.stringify(selectedItems)}</Fragment>);}}</ElementsSelector>);}}exportdefaultApp;render(<App/>,document.getElementById('root'));

License

MIT © functionalStoic

Contributors

Thanks goes to these wonderful people (emoji key):

Josh Hamilton 💬🐛💻📖💡👀⚠️🔧	functionalStoic 💬🐛💻📖💡👀⚠️🔧

This project follows the all-contributors specification. Contributions of any kind welcome!