1.0.2 • Published 7 years ago

react-simple-show-more v1.0.2

Weekly downloads
24
License
MIT
Repository
github
Last release
7 years ago

React Simple Show More

npm package

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

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

Parametervalueis requireddefault
textstringyes
lengthstring, numberno170
showMoreLabelstringno'Show more'
showLessLabelstringno'Show less'
tagstringno'span'
classNamestringno''
ellipsisstringno'...'
styleobjectnodefault Style
enabledbooleannotrue
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.

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago