React animated line clamp

React Animated Line Clamp Demo

React Animated Line Clamp is a lightweight and zero-dependency npm package with React functional component for animating text truncation with line clamping. This is a demo of how it works with NextJS and Chakra UI.

Example with `ShowLess` button, 4 clamped lines, duration 300

Ex ad adipisicing laborum aliqua id do ad. Ea nulladeserunt irure nulla cupidatat velit Lorem nisi. In sitmollit commodo pariatur aliqua consectetur est laborisminim id ea. Ut pariatur deserunt pariatur ea ea somanoullamco eiusmod nisi commodo dolore veniam deseruntexcepteur. Qui voluptate non culpa ipsum pariatur dolorereprehenderit qui eu. Amet ea sunt dolore do fugiatofficia nulla anim labore. Pariatur in ut ex ullamcode la reprehenderit officia cillum. Pariatur in ut exQui voluptate non culpa ipsum pariatur doloreeiusmod nisi commodo dolore veniam deserunt excepteur.reprehenderit qui eu. Amet ea sunt dolore do fugiatofficia nulla anim labore.

Example with `ShowLess` button, 4 clamped lines, duration 600

Ex ad adipisicing laborum aliqua id do ad. Ea nulladeserunt irure nulla cupidatat velit Lorem nisi. In sitmollit commodo pariatur aliqua consectetur est laborisminim id ea. Ut pariatur deserunt pariatur ea ea somanoullamco eiusmod nisi commodo dolore veniam deseruntexcepteur. Qui voluptate non culpa ipsum pariatur dolorereprehenderit qui eu. Amet ea sunt dolore do fugiatofficia nulla anim labore. Pariatur in ut ex ullamcode la reprehenderit officia cillum. Pariatur in ut exQui voluptate non culpa ipsum pariatur doloreeiusmod nisi commodo dolore veniam deserunt excepteur.reprehenderit qui eu. Amet ea sunt dolore do fugiatofficia nulla anim labore.

Example with `Less` button, 6 clamped lines, animation duration 600

Ex ad adipisicing laborum aliqua id do ad. Ea nulladeserunt irure nulla cupidatat velit Lorem nisi. In sitmollit commodo pariatur aliqua consectetur est laborisminim id ea. Ut pariatur deserunt pariatur ea ea somanoullamco eiusmod nisi commodo dolore veniam deseruntexcepteur. Qui voluptate non culpa ipsum pariatur dolorereprehenderit qui eu. Amet ea sunt dolore do fugiatofficia nulla anim labore. Pariatur in ut ex ullamcode la reprehenderit officia cillum. Pariatur in ut exQui voluptate non culpa ipsum pariatur doloreeiusmod nisi commodo dolore veniam deserunt excepteur.reprehenderit qui eu. Amet ea sunt dolore do fugiatofficia nulla anim labore.

Example without `ShowLess` button, 6 clamped lines, smoothly animation

Ex ad adipisicing laborum aliqua id do ad. Ea nulladeserunt irure nulla cupidatat velit Lorem nisi. In sitmollit commodo pariatur aliqua consectetur est laborisminim id ea. Ut pariatur deserunt pariatur ea ea somanoullamco eiusmod nisi commodo dolore veniam deseruntexcepteur. Qui voluptate non culpa ipsum pariatur dolorereprehenderit qui eu. Amet ea sunt dolore do fugiatofficia nulla anim labore. Pariatur in ut ex ullamcode la reprehenderit officia cillum. Pariatur in ut exQui voluptate non culpa ipsum pariatur doloreeiusmod nisi commodo dolore veniam deserunt excepteur.reprehenderit qui eu. Amet ea sunt dolore do fugiatofficia nulla anim labore.