React Box Selection
React component for making box selections on elements.
Gif
Installation
npm install || yarn
Usage
const content = ...Array7 Component state = {} { this { } } { //all items(dom) console } { //data-position(array of string),selected items(array of dom) console } { //data-position(string),selected items(dom) console } { console } { console } { return <div> <Selection cols=24 rows=48 width=30 height=50 gap=10 wrapperScroll=undefined onMounted=thismounted onHovered=thishovered onLeaved=thisleaved onSelected=thisselected onSingleSelected=thissingleSelected itemClass='selection_item' extraClass='extra_1' 'extra_2' activeClass='selection_item_active' > content </Selection> </div> }
params
name | defaultValue | must | Effect |
---|---|---|---|
cols | 24 | × | columns |
rows | 7 | × | rows |
height | 50px | × | item's height |
width | 30px | × | item's width |
gap | 0 | × | item's spacing |
wrapperScroll | window scrollTop & scrollLeft | × | outer dom scrollTop & scrollLeft |
Children | - | × | item's dom or text |
onMounted | - | × | mounted callback |
onHovered | - | × | overed callback |
onLeaved | - | × | leaved callback |
onSelected | - | × | selected callback |
onSingleSelected | - | × | select or click on a single callback |
itemClass | selection_item | × | items' class |
extraClass | [] | × | items' extra class |
activeClass | selection_item_active | × | items' active class |