react-expandable-content

1.1.0 • Public • Published

Npm Version License Downloads Per Week

react-expandable-content

React component to enable text collapse based on a certain height

Table of Contents

Installation

Install via npm or yarn

npm install react-expandable-content --save

yarn add react-expandable-content

Usage

ExpandableContent can receive any HTML elements or React components as its children.

import React from 'react';
import ExpandableContent from 'react-expandable-content';

const App = () => {
  return (
    <ExpandableContent maxHeight={100} collapseText={"Read less"} expandText={"Read more"}>
      <p>
        This content will be collapsed. It can be any kind of HTML or React components.
      </p>
      <p>
        Another section that will be collapsed.
      </p>
    </ExpandableContent>
  );
};

export default App;

Examples

Code Examples

Props

props default type usage
expandable true boolean Enable content to be expanded
expandText "Read more" string Text to display when content is collapsed
collapseText "Read less" string Text to display when content is expanded
className string CSS class applied to the expandable part
maxHeight 100 integer Max height in pixels for your collapsed content
showIcon true boolean Whether the dropdown icon should be displayed
onCollapse func Callback function triggered when content is collapsed
onExpand func Callback function triggered when content is expanded
darkMode false boolean Enabling dark mode on your content (black background)

License

MIT

Contributors

Package Sidebar

Install

npm i react-expandable-content

Weekly Downloads

18

Version

1.1.0

License

MIT

Unpacked Size

22.9 kB

Total Files

7

Last publish

Collaborators

  • hboisgibault