Animated Show More toggle in React

Hi, my name is Tina! I am a Full Stack Software Developer and Tech Lead from Canada. ππ»ββοΈ
Search for a command to run...

Hi, my name is Tina! I am a Full Stack Software Developer and Tech Lead from Canada. ππ»ββοΈ
No comments yet. Be the first to comment.
Have you ever installed a package by using go install <some-package> and wondered how to uninstall it? Go is really great in that respect. Go packages are a single binary and theyβre installed based on how your Go tooling is set up. Provided we have ...

Overview This is the 3rd article in a series of posts about working with Open API to create generated API clients and documentation websites. In the 1st post we went over what we can do with Open API spec files, e.g. generate API clients and documen...

Overview This article is the 2nd in a series of blog posts that discuss using Open API to help with API documentation and API client code generation. In the previous article, we went over how we can generate documentation and API clients using existi...

Overview This article starts a series of Open API-related blog posts. OpenAPI, previously known as Swagger (a name still in use today for many of its tools), is a suite of tools that generate documentation and networking clients for various programmi...

You've probably already seen the scary alert (that's possibly why you're here), but in case you haven't, it looks something like this: NewAppIJustDownloaded pasted from your clipboard Sometimes it h

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




This Animated Show More toggle allows you to customize a number of items:
isOpenheight to customize the collapsed heightspeed to customize the animation speedshadowColor 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';
// ...
<AnimatedShowMore
height={100}
toggle={({ isOpen }) => isOpen ? 'Close!' : 'Open!' }
speed={2000}
shadowColor="#000">
{/* Lots of stuff goes here */}
<DemoText />
</AnimatedShowMore>
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.
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.