Skip to content

tinacious/react-animated-show-more

Repository files navigation

React Animated Show More

Build Status codecov

This is a simple, fully-customizable component that expands an area of text to show the rest of it.

Try out the demo for yourself.

Features

  • Supports custom toggle component, otherwise shows "Show more" or "Show less"
    • toggle (React component) – should implement prop isOpen
  • Configurable properties
    • height (in pixels, default: 200)
    • speed (in milliseconds, default: 300)
    • shadowColor (any colour format, default: #fff)

Peer dependencies

  • React v16.8+ (uses hooks)

Usage

Installation

With NPM:

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

With Yarn:

yarn add react-animated-show-more

The component wraps around your lengthy text section.

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>

Contributing

How can I contribute?

  • Report bugs in the issue queue
  • Solve bugs in the issue queue
  • Add features (check the issue queue for ideas)
  • Write documentation

Feel free to make pull requests or issues to make this project better 👯

Releases

No releases published

Sponsor this project

 

Packages

No packages published