react-description-box

====================

Customizable React component that can shorten long text using str_shorten library for better display

Quickstart

Install the module with:

npm install --save react-description-box

Getting Started

Import DescriptionBox to your React Component

import DescriptionBox from 'react-description-box';

Example

let content = "You will win if you want";
<DescriptionBox maxChars='11' content={content}/>

The output will be

<div>You will...</div>

Customizable description box container

<DescriptionBox maxChars='11'
  content="You will win if you want"
  component={(props) => {
    return (
      <ul>
        <li>
          {props.children}
        <li>
      </ul>
    )
  }}
/>

The generated HTML will be

<ul>
  <li>
    You will...
  </li>
</ul>

Add 'Read more' link

<DescriptionBox maxChars='11'
  content="You will win if you want"
  readMore={{
    text: 'Read more',
    link: 'http://google.com'
  }}
/>

The generated HTML will be

<ul>
  <li>
    You will...
    <a href='http://google.com' target="self">Read more</a>
  </li>
</ul>

Add 'Read more' link with custom 'target'

<DescriptionBox maxChars='11'
  content="You will win if you want"
  readMore={{
    text: 'Read more',
    link: 'http://google.com',
    target: '_blank'
  }}
/>

The generated HTML will be

<ul>
  <li>
    You will...
    <a href='http://google.com' target="_blank">Read more</a>
  </li>
</ul>

Options

Development

Fix issue with system watchers

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Contributing

Contributions are welcome!

Thanks

Thanks to the following repositories for code and inspiration:

• React Component Boilerplate

License

Copyright (c) 2018 Binh Quan

Licensed under the MIT license.