https://github.com/tinacious/react-animated-show-more

💬 Fully customizable, lightweight "Show more" component
https://github.com/tinacious/react-animated-show-more

javascript react reactjs toggle

Last synced: about 2 months ago
JSON representation

💬 Fully customizable, lightweight "Show more" component

• Host: GitHub
• URL: https://github.com/tinacious/react-animated-show-more
• Owner: tinacious
• License: mit
• Created: 2019-04-19T19:23:24.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T16:03:19.000Z (almost 3 years ago)
• Last Synced: 2024-11-07T08:15:58.830Z (about 1 year ago)
• Topics: javascript, react, reactjs, toggle
• Language: JavaScript
• Homepage: https://tinacious.github.io/react-animated-show-more/
• Size: 1.81 MB
• Stars: 5
• Watchers: 2
• Forks: 4
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
# React Animated Show More

[![Build Status](https://travis-ci.org/tinacious/react-animated-show-more.svg?branch=master)](https://travis-ci.org/tinacious/react-animated-show-more) [![codecov](https://codecov.io/gh/tinacious/react-animated-show-more/branch/master/graph/badge.svg)](https://codecov.io/gh/tinacious/react-animated-show-more)

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

Try out the [demo](https://tinacious.github.io/react-animated-show-more) for yourself.

![](react-animated-show-more-demo.gif)

## 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.

```jsx

import React from 'react';

import AnimatedShowMore from 'react-animated-show-more';

// ...

 isOpen ? 'Close!' : 'Open!' }

  speed={2000}

  shadowColor="#000">

  {/* Lots of stuff goes here */}

  

```

## 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 👯