React-simple-spoiler NPM

react-simple-spoiler

React Simple Spoiler helps you to create a collapsible spoiler component where some portion of your component is visible and can be toggled.

GIF showing the basic working of react-simple-spoiler

Installation

Use the package manager npm to install react-simple-spoiler.

npm install react-simple-spoiler --save

Usage

import { ReactSpoiler } from 'react-simple-spoiler';

const App = () => {
  return (
    <ReactSpoiler
      noOfLines={5}
      containerStyle={{ background: 'red' }}
      showMoreComponent={<p>Show more comp</p>}
      showLessComponent={<p>Show less comp</p>}
    >
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque possimus
      facilis fugiat a quam dolores provident ducimus reiciendis pariatur rerum,
      officiis est nesciunt vel, excepturi harum. Ea sequi itaque vero. Lorem
      ipsum dolor sit amet consectetur adipisicing elit. Itaque possimus facilis
      fugiat a quam dolores provident ducimus reiciendis pariatur rerum,
      officiis est nesciunt vel, excepturi harum. Ea sequi itaque vero.
    </ReactSpoiler>
  );
};

export default App;

Props

children: React.ReactNode

Element where you want to create a spoiler.

noOfLines?: number

How many lines do you want to show initially. Default is: 4. It does not work if you use collapsedSize prop.

lineHeight?: number

If you are using a different line height for your children then provide it to this prop to make the spoiler more cleaner. If you do not provide the value then it automatically calculates the line height of the spoiler element. It does not work if you use collapsedSize prop.

collapsedSize?: number

How much height that you want to open initially. Note: If you use this props then the noOfLines and lineHeight props won't work.

containerStyle?: React.CSSProperties

Provide style to the show more/less container.

showMoreComponent?: React.ReactNode;

Show more component. Default is a string "Show More"

showLessComponent?: React.ReactNode;

Show less component. Default is a string "Show Less"