Simple hook to truncate items in the given list

Last update: Jul 19, 2021

useTagTruncator

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
  • Demo
  • Test

Usage


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

const App = () => {
  const [
    containerRef,
    isExtended,
    toggleExtend,
    hiddenCount,
  ] = useTagTruncator();
  
  return (
    <ul
      ref={containerRef}
      style={{
        maxHeight: 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>
  )
}

Licence


MIT


Credit to react-truncate-list

GitHub

https://github.com/gyto/react-use-tag-truncator
You might also like...

A simple React Native date input component

A simple React Native date input component

react-native-datefield A simple React Native date input component Installation yarn add react-native-datefield or npm install react-native-datefield

Apr 8, 2022

React-Native Market Exchange Simple App

React-Native Market Exchange Simple App

Current Market React native simple exchange market app. Angular page use the same api. Technologies: react 16.13.1 react-native 0.63.3 react-navigatio

Aug 11, 2021

A simple react component for adding a nice typewriter effect to your project.

A simple react component for adding a nice typewriter effect to your project.

React Simple Typewriter A simple react component for adding a nice typewriter effect to your project. Install npm npm i react-simple-typewriter Yarn y

Apr 24, 2022

A simple and fully customizable React Native component that implements an Image Slider UI.

A simple and fully customizable React Native component that implements an Image Slider UI.

react-native-image-slider-box Announce: All Pull-Requests have been applied. CI/CD has been integrated to update the package automatically. How to sen

May 12, 2022

🎭A simple and effective Text Input with mask for ReactNative on iOS and Android. Includes obfuscation characters feature.

🎭A simple and effective Text Input with mask for ReactNative on iOS and Android. Includes obfuscation characters feature.

React Native Mask Input A simple and effective Text Input with mask for ReactNative on iOS, Android, and Web. No fancy stuff, it's basically a JavaScr

May 13, 2022

Solidjs-lazily - a simple wrapper around SolidJS's lazy that supports named imports

solidjs-lazily solidjs-lazily is a simple wrapper around SolidJS's lazy that sup

Mar 9, 2022

fflow is a free, open-source developer tool to create React applications rapidly and with minimal effort using the simple drag and drop UI

fflow is a free, open-source developer tool to create React applications rapidly and with minimal effort using the simple drag and drop UI

fflow Supercharge your React development process Explore the docs » View Demo · Report Bug · Request Feature Give a ⭐️ if our project helped or intere

May 5, 2022

React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click

React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click

React Dev Inspector Introduction This package allows users to jump to local IDE code directly from browser React component by just a simple click, whi

May 12, 2022

⚡️The Fullstack React Framework — built on Next.js

⚡️The Fullstack React Framework — built on Next.js

⚡️The Fullstack React Framework — built on Next.js

May 15, 2022

⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

⚡️The Fullstack React Framework — built on Next.js — Inspired by Ruby on Rails

Oct 12, 2021

Truncate a long string in the middle, instead of the end.

React Middle Ellipsis Check out the demo. Adding ellipses to the end of long text is cool. But not always! Sometimes the end of the text contains vita

Apr 28, 2022

React hook to clamp multiline text to a given height in a responsive way and with extreme flexibility (under 2.5kb)

use-clamp-text react hook to clamp multiline text to a given height in a responsive way and with extreme flexibility (under 2.5kb) Line Clampin’ (Trun

May 13, 2022

A react component to select multiple items from a list of options using the Material-UI Autocomplete component.

A react component to select multiple items from a list of options using the Material-UI Autocomplete component.

Jun 29, 2021

A React component for (list) items with swipe to reveal actions.

A React component for (list) items with swipe to reveal actions.

A React component for (list) items with swipe to reveal actions.

Mar 8, 2022

React-based list with selectable and navigable items

react-list-select A list with selectable and keyboard navigable items. Useful as a dropdown (autocomplete), right click menu, or a simple list with ac

Apr 18, 2022

React component for a list of draggable collapsible items

React component for a list of draggable collapsible items

react-draggable-list This component lets you make a user re-orderable list that animates nicely so that the user can easily move large items: The abov

Apr 29, 2022

A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!

A tiny but mighty 3kb list virtualization library, with zero dependencies 💪 Supports variable heights/widths, sticky items, scrolling to index, and more!

react-tiny-virtual-list A tiny but mighty list virtualization library, with zero dependencies 💪 Tiny & dependency free – Only 3kb gzipped Render mill

May 10, 2022

A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.

A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.

React Native Rating Element A simple rating library for react native supporting: a11y ready ⚛️ decimal points like 3.7, 4.2 etc, direction aware icons

Feb 24, 2022

Know-emoticon neogcamp - A simple React App which takes the emoji as an input from the given emojis and output its name

Know-emoticon neogcamp - A simple React App which takes the emoji as an input from the given emojis and output its name

Know Emoticon This is React based simple App which takes the emoji as an input f

Jan 30, 2022
Comments
  • 1. Testing and demo

    • Implement storybook
    • Github action to deploy storybook
    • Removed mounted from the hook options
    • Preserve option to do not display hidden-button if the items are less then expected in given measures of the div
    Reviewed by gyto at 2021-04-13 21:50
The List Component advanced example with Mobx state management
The List Component advanced example with Mobx state management

react-declarative Пример архитектуры React + Mobx приложения Описание В комплекте система сервисов, взаимодействующих через композицию. Она позволяет

Dec 24, 2021
ESLint plugin for react-hook-form

eslint-plugin-react-hook-form react-hook-form is an awsome library which provide a neat solution for building forms. However, there are many rules for

May 7, 2022
🛹 React Web3 wallet hook for the Onboard.js library.

useOnboard() A React Web3 wallet hook for Onboard.js library. Features Fully configurable as much as Onboard itself selectWallet and disconnectWallet

Mar 13, 2022
Docusaurus-theme-frontmatter - Docusaurus theme to expose front matter through a component hook

docusaurus-theme-frontmatter This package enhances the Docusaurus classic theme

Apr 27, 2022
🐐 Simple and complete React DOM testing utilities that encourage good testing practices.
🐐 Simple and complete React DOM testing utilities that encourage good testing practices.

React Testing Library Simple and complete React DOM testing utilities that encourage good testing practices. Read The Docs | Edit the docs Table of Co

May 11, 2022
Simple, reactive labels for SolidJS
Simple, reactive labels for SolidJS

Install yarn add babel-plugin-solid-labels Features ?? Labels: Turn labels into SolidJS utility calls! ?? Comments: Turn comments into SolidJS utility

Apr 20, 2022
Component to build simple, flexible, and accessible toggle components
Component to build simple, flexible, and accessible toggle components

react-toggled ⚛️ Component to build simple, flexible, and accessible toggle components The problem You want a toggle component that's simple and gives

Mar 15, 2022
This is a simple VSCODE extension that shows the symbols and outlines for a React file.
This is a simple VSCODE extension that shows the symbols and outlines for a React file.

React Outline This is a simple extension that shows the symbols and outlines for a React file. It can detect custom components and also html tags. Her

Jan 16, 2022
Simple mobile app to track who has paid for an event

PayMe Simple app that tracks who has paid for an event. Track small payments for an event Use common people lists for an event Features Overview (list

Feb 1, 2022
Simple searchable single/ multi-select dropdown for react material.

react-mui-multiselect-dropdown It is simple and light weight single/multiselect searchable dropdown library. This package is built using popular react

Jan 20, 2022