react-headless-hooks v1.0.5

react-headless-hooks

A collection of headless hooks

The inspiration for this library is to provide hooks to create graceful ui experiences in react with no relevant UI elements, much like Formik or react-table.

installation

//npm
npm i react-headless-hooks

//yarn
yarn add react-headless-hooks

usePrevious

Allows for user to keep track of a value at the previous render.

import { usePrevious } from 'react-headless-hooks'

--------

const [count,setCount] = useState(0)

const previousCount = usePrevious(count)

useEffect(() => {
  if(count !== previousCount) {
    <!-- do something -->
  }
}. [count,previousCount])

this hook is used internally to maintain the selected by index value in the useSelected hook

useSelected

Hook allows user to select items from a list, providing utilities to help implement visualising whether an item is selected and to return the relevant data that is selected.

import { useSelected, SelectTypeEnum } from 'react-headless-hooks'

--------

const data = [
  {
    id: 'oreo-id',
    name: 'Oreo',
  }
  ... more data
]


const SelectableList = () => {
   const { getIsSelected, toggle, allSelected, toggleSelectAll, selected, selectedData } = useSelected({
    data,
    selectType: SelectTypeEnum.BY_INDEX,
    getItemId: (item) => item.id,
  });

  return <div>
    <button onClick={toggleSelectAll}>{allSelected ? 'Deselect all': 'Select all'} <button>
    <ul>
      {data.map((item,index) => {
        <li
          key={item.id}
          onClick={() => toggle(item,index)}
          style={{fontWeight: getIsSelected(item,index) ? 'bold': 'normal' }}
        >
           {item.name}
        </li>
      })}
    </ul>
  </div>

}

This very simple example shows how to use the hook to render a list where the elements are selectable. The hook returns two different dataTypes to describe selected elements.

selected

Selected is an object with either the the value returned by the getItemId function (if selectType is SelectTypeEnum.BY_INDEX) or the index in the array (if the selectType is SelectTypeEnum.BY_ID) as the key and a boolean value for the value.

In this example if the entry with name 'Oreo' was clicked selected would be as follows

{
  oreo-id: true
}

selectedData

This object is mapped back to an array internally so in the example above the output of selectedData would be

[
  {
    id: 'oreo-id',
    name: 'Oreo',
  }
]

it is possible to disable this functionality if it is deemed to be too memory intensive to run on every render by passing in

withAutoSelect: false

If you want to retrieve the selectedData programmatically say on a button press the hook returns a function selectData which returns the data in the same format as selectedData.

Input props

Output props

useStepper

A hook that returns the current step (1 indexed) in a multistep process.

const { step, next, previous, canGoForwards, canGoBackwards, goTo } = useStepper({ steps: 3 })

Input props

Output props

usePagination

A hook that breaks a data array into arrays of a smaller 'pageSize'

const { currentPage, currentPageData, pages, totalPages,  ...useStepperValues } = usePagination({ data, pageSize: 10 })

Input props

Output props