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

| name | default | required | type | description | |--------------|----------|----------|----------|-----------------------------------------------------------------------------------------------------------------| | content | empty | false | string | Content of description box | | maxChars | 300 | false | number | Max characters of description box. | | component | div component | false | React Component | A function or class that generate component for the container | | readMore | null | false | object | An object that contains: * text: Link text * link: Destination url |

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.