Animated Show More toggle in React

Animated Show More toggle in React


4 min read

React Animated Show More is a simple, fully-customizable component that expands and collapses to show your content.

Animated GIF of React Animated Show More

Why use React Animated Show More?

  1. It works!
  2. It uses the latest React version which introduces Hooks, and it's awesome!
  3. It's well-tested and boasts 100% test coverage for both rendering and behaviour
  4. It uses CSS transitions for animating
  5. It's fully customizable
  6. It's open-source, so if you think it could use an improvement, you can contribute on Github!

Build Passing badge and 100% code coverage coverage chart visualizing tested areas of the library

CodeCov table of test coverage by file


This Animated Show More toggle allows you to customize a number of items:

  • Custom toggle component which supports render prop isOpen
  • height to customize the collapsed height
  • speed to customize the animation speed
  • shadowColor to customize the small shadow overlay that helps your users see that there's more to read. This was designed to be used on any background colour.

I built this library to test out Hooks in React 16.8. That said, this project requires at least React 16.8 in order to use it.



To use this component in your React project that supports hooks, simply run one of the following scripts.

For NPM:

npm install --save react-animated-show-more

For Yarn:

yarn add react-animated-show-more


To implement the React Animated Show More toggle, just wrap it around your lengthy content to trim it down.

You just pass in your configuration props for height, overlay shadow gradient colour, animation speed, and custom toggle component.

import React from 'react';
import AnimatedShowMore from 'react-animated-show-more';

// ...

  toggle={({ isOpen }) => isOpen ? 'Close!' : 'Open!' }

  {/* Lots of stuff goes here */}
  <DemoText />


That's all there is to it. It's a simple plugin with minimal styling that allows you to provide your own component that expands and/or collapsed when you click it.

More info

If you like what you see and would like me to speak at your conference or help you part-time on a project, feel free to contact me.