react-viewmore

1.0.7 • Public • Published

#react-viewmore

A component to hide automatically content when its height is larger than browser's height.

##Navigation :

##How to use :

Install react-viewmore via npm :

npm install --save react-viewmore

Use it :

import Readmore from 'react-viewmore'

<Readmore id='viewmore-example'>
	<h1>Random title</h1>
	<p>...</p>
</Readmore>

##Properties :

  • id (Number || String) : An unique id for the Readmore component (default: random integer)
  • readMoreText (String) : The button text when the content is hidden (default: 'View more')
  • readLessText (String) : The button text when the content is fully displayed (default: 'View less')
  • wrapperClassName (String) : An additionnal className from the wrapper (default: 'Read_more')
  • hideClasse (String) : An additionnal className when the content is hiden (default: 'Read_more_hide')
  • buttonClassName (String) : An additionnal className for the button (default: 'Read_more_button')
  • offset (Number) : An additionnal height to max value to hide the children contnet (default: 0)
  • onHide (Function) : A callback called when the content is hides
  • onShow (Function) : A callback called when the content is shown
  • onReadmore: (Function) : A callback called when the view more button is clicked
  • onReadless: (Function) : A callback called when the view less button is clicked
  • type (String || Component) : A custom HTML tag or a component to replace the default view more button.
  • maxHeight (String) : A max height to hide the content.

##Development :

npm install 		  //Install node modules
npm run storybook //Launch the project

npm lint    		 //Run linter

##License :

MIT

Readme

Keywords

Package Sidebar

Install

npm i react-viewmore

Weekly Downloads

2

Version

1.0.7

License

MIT

Last publish

Collaborators

  • arncet