Skip to content

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

License

Notifications You must be signed in to change notification settings

binhqd/react-description-box

Repository files navigation

react-description-box

Build Status bitHound Score Coverage Status bitHound Code npm version Downloads

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

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:

License

Copyright (c) 2018 Binh Quan

Licensed under the MIT license.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published