Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/binhqd/react-description-box

Customizable React component that can shorten long text using str_shorten library for better display
https://github.com/binhqd/react-description-box

boundary brief description ellipsize react reactjs shorten string truncate word-boundary

Last synced: 18 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/binhqd/react-description-box
Owner: binhqd
License: mit
Created: 2018-03-04T17:02:15.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2018-03-12T06:45:17.000Z (over 6 years ago)
Last Synced: 2024-10-13T18:35:48.800Z (about 1 month ago)
Topics: boundary, brief, description, ellipsize, react, reactjs, shorten, string, truncate, word-boundary
Language: JavaScript
Homepage:
Size: 4.63 MB
Stars: 3
Watchers: 2
Forks: 0
Open Issues: 4
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # react-description-box

[![Build Status](https://travis-ci.org/binhqd/react-description-box.svg?branch=master)](https://travis-ci.org/binhqd/react-description-box)

[![bitHound Score](https://www.bithound.io/github/binhqd/react-description-box/badges/score.svg)](https://www.bithound.io/github/binhqd/react-description-box)

[![Coverage Status](https://coveralls.io/repos/binhqd/react-description-box/badge.svg?branch=master&time=2018.03)](https://coveralls.io/r/binhqd/react-description-box?branch=master)

[![bitHound Code](https://www.bithound.io/github/binhqd/react-description-box/badges/code.svg)](https://www.bithound.io/github/binhqd/react-description-box)

[![npm version](https://img.shields.io/npm/v/react-description-box.svg?style=flat-square)](https://www.npmjs.com/package/react-description-box)

[![Downloads](http://img.shields.io/npm/dm/react-description-box.svg)](https://www.npmjs.com/package/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

```js

import DescriptionBox from 'react-description-box';

```

### Example

```js

let content = "You will win if you want";

```

The output will be

```

You will...

```

#### Customizable description box container

```javascript

 {

    return (

      


        

          {props.children}

        



      



    )

  }}

/>

```

The generated HTML will be

```



  

    You will...

  



```

#### Add 'Read more' link

```javascript

```

The generated HTML will be

```



  

    You will...

    Read more

  



```

#### Add 'Read more' link with custom 'target'

```javascript

```

The generated HTML will be

```



  

    You will...

    Read more

  



```

## 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](https://github.com/survivejs/react-component-boilerplate)

## License

Copyright (c) 2018 Binh Quan

Licensed under the MIT license.