binhqd/react-description-box

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

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.

react-description-box's Issues

Description container must be able to have custom attributes

Using react component boilerplate

Add test with enzyme

Add example for 'Read more' link

Description container must be customizable

Enable BitHound CI

Address issue found in src/DescriptionBox.js [Opened by bitHound]

bitHound discovered 2 LintIssues in src/DescriptionBox.js. For details go to bitHound.

---

Solve these issues with Lint:

1. Declare only one React component per file (line 25)
2. 'children' is missing in props validation (line 27)

Create component

Add demo

Initial source code

Things to initial:

• package.json
• .eslintrc.json

Add badges

1. Build passing
2. hounce.io
3. Code coverage
4. npm downloads
5. npm version
6. Dependency check

Enable Travis CI

Enable Coveralls.io

Enable expand/collapse

Enable custom read more action

strip HTML tags