Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-animated-show-more with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactAnimatedShowMore = require("react-animated-show-more")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-animated-show-more v1.0.1

Fully customizable animated 'show more' plugin

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 👯

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free