Skip to content

nipunadk/react-read-more

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Read more

demo

npm install @crossfield/react-read-more

This read more component helps truncate large chunks of text/html and animates to the full height of the inner content.

Example

<ReadMore
  initialHeight={350}
  readMore={props => (
    <ReadMoreButton onClick={props.onClick}>
      {props.open ? 'Read Less' : 'Read More'}
      <Icon
      name="caret"
      style={{
        transform: `rotate( ${props.open ? '-90deg' : '90deg'})`,
        transition: 'transform 0.25s',
      }}
      />
    </ReadMoreButton>
  )}
>
  <Label>The Design Vision</Label>
  <Text>
      SOME LONG TEXT
  </Text>
</ReadMore>

Props

initialHeight

The closed size of the container

readMore

render function that gives you a props object containing open and onClick to toggle open / close

About

Transition content from small to full height

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%