A Simple React hook to truncate items in the given list

useTagTruncator

Simple hook to truncate items in the given list.

Installation


yarn add react-use-tag-truncator
npm install react-use-tag-truncator

TODO


Minor stuff need to be done in project:

  • [ ] Fix remaining flowtype errors
  • [x] Demo
  • [ ] Test

Usage



import useTagTruncator from "react-use-tag-truncator";

const App = () => {
  const [
    containerRef,
    isExtended,
    toggleExtend,
    hiddenCount,
  ] = useTagTruncator();
  
  return (
    <ul
      ref={containerRef}
      style={{
        height: isExtended ? "none" : "65px",
        width: "300px",
        display: "flex",
        flexWrap: "wrap",
      }}
    >
      {Array.from({ length: 26} ).map((_, index) => (
        <li key={index}>item #{index + 1}</li>
      ))}
      <li onClick={toggleExtend}>
        {isExtended ? "Hide" : `+ ${hiddenCount} more...`}
      </li>
    </ul>
  )
}

GitHub

https://github.com/gyto/react-use-tag-truncator