react-animated-show-more

    1.0.2 • 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

    361

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    5.24 MB

    Total Files

    51

    Last publish

    Collaborators

    • tinaciousdesign