☑️ useSelection

> 🪝 A React hook to handle items selection in a list.

 

🤳🏽 Demo

See useSelection hook in action.

📦 Install

``bash
npm install --save use-selection
`

🪝 Usage

`jsx
import React, { useState } from 'react';

import useSelection from 'use-selection';

const Example = () => {
const [people] = useState([
{
name: 'John Doe',
age: 20
},
{
name: 'Jane Doe',
age: 18
},
{
name: 'Jannet Doe',
age: 25
},
{
name: 'Jackson Doe',
age: 10
},
{
name: 'Jake Doe',
age: 40
}
]);

const {
itemsListContainerRef,
selectedItems,
handleToggleSelect,
handleToggleSelectAll
} = useSelection();

return (
<>
You selected: {selectedItems.length} people.


• 
  Toggle select all people:
  type='checkbox'
  id='selectAll'
  checked={selectedItems.length === people.length}
  onChange={(event) => handleToggleSelectAll(event, people.length)}
  />
  

{people.map((person, index) => (


• 
  type='checkbox'
  onChange={(event) => handleToggleSelect(event, index)}
  />

  
  Name: {person.name} • Age: {person.age}
  
  


))}

export default Example;
`

$3

`tsx
import React, { FC, useState } from 'react';

import useSelection from 'use-selection';

const App: FC = () => {
const [people] = useState([
{
name: 'John Doe',
age: 20
},
{
name: 'Jane Doe',
age: 18
},
{
name: 'Jannet Doe',
age: 25
},
{
name: 'Jackson Doe',
age: 10
},
{
name: 'Jake Doe',
age: 40
}
]);

const {
itemsListContainerRef,
selectedItems,
handleToggleSelect,
handleToggleSelectAll
} = useSelection();

return (
<>
You selected: {selectedItems.length} people.


• 
  Toggle select all people:
  type='checkbox'
  id='selectAll'
  checked={selectedItems.length === people.length}
  onChange={(event) => handleToggleSelectAll(event, people.length)}
  />
  

{people.map((person, index) => (


• 
  type='checkbox'
  onChange={(event) => handleToggleSelect(event, index)}
  />

  
  Name: {person.name} • Age: {person.age}
  
  


))}

export default App;
``

License

MIT © Victor Aremu