Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

react-animated-show-more

1.0.1 • Public • Published

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 👯

Keywords

none

Install

npm i react-animated-show-more

DownloadsWeekly Downloads

44

Version

1.0.1

License

MIT

Unpacked Size

44.2 MB

Total Files

169

Last publish

Collaborators

  • avatar