Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-viewmore

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

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.

  • 1.0.7
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4
increased by300%
Maintainers
1
Weekly downloads
 
Created
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

Package last updated on 06 Mar 2017

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc