Socket
Socket
Sign inDemoInstall

react-viewmore

Package Overview
Dependencies
28
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react-viewmore

A component that automatically hides content when its height is greater than the browser's height.


Version published
Weekly downloads
4
decreased by-20%
Maintainers
1
Install size
6.67 MB
Created
Weekly downloads
 

Readme

Source

#react-viewmore

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

##Navigation :

  • How to use
  • Properties
  • Development
  • License
  • Demo

##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

Keywords

FAQs

Last updated on 06 Mar 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc