React Simple Show More

Demo: https://elated-curran-7104e4.netlify.com/

Very simple and lightweight Show More feature.

It is in alpha testing. Please make an issue if you have any suggestion or feature request.

Table of contents

• Installation
• Overview
• Usage
• Demo
• Props
• Contribution

Installation

npm i react-simple-show-more

Overview

Very simple Show more feature.
This package guarantees you not to collapse in middle of the word.
For example: with length 23 = "I just want to say Hello" => "I just want to say" (not "I just want to say Hell")

Usage

Super easy to use:

import ShowMore from "react-simple-show-more"

class YourComponent extends Component {
  render() {
    return (
      <ShowMore
        text="Very long text"
      />
    );
  }
}

You can also configure it as your demand:

import ShowMore from "react-simple-show-more"

class YourComponent extends Component {
  render() {
    return (
      <ShowMore
        text="Very long text"
        length={170}
        showMoreLabel=" Expand"
        showLessLabel=" Collapse"
        tag="a"
        className="text-blue"
        ellipsis="..."
        style={{
          cursor: 'pointer',
          color: 'green',
          fontWeight: 'bold',
        }}
        enabled
      />
    );
  }
}

Demo

You can see demo via this https://elated-curran-7104e4.netlify.com/

Props

Parameter	value	is required	default
text	string	yes
length	string, number	no	170
showMoreLabel	string	no	'Show more'
showLessLabel	string	no	'Show less'
tag	string	no	'span'
className	string	no	''
ellipsis	string	no	'...'
style	object	no	default Style
enabled	boolean	no	true

defaultStyle = {
  cursor: 'pointer',
  color: '#007bff',
}

Contribution

All helps are welcome. Please open a PR and describe what do you want to improve.

Issues

Please create an issue at https://github.com/nvh95/react-simple-show-more/issues. I will spend time to help you.