Lightweight and customizable React component that helps save real estate by limiting content height, with the option to expand and hide the content.

In the JS ecosystem, there exists libraries like react-truncate, react-show-more, and even ellipsis.js to handle showing more content. However, these solutions are tailored towards text-specific use cases.

The aim of this library is to support expanding and collapsing rich HTML. It does this using a double-rendering technique where the content is first rendered off-screen and measured, in order to decide the correct render behaviour. This means that there will be a slight performance overhead from rendering twice, but for most applications, this shouldn't be a huge problem. I'm happy to take PR's for better solutions.

npm install --save react-unveil

import Unveil from 'react-unveil';

class Demo {
  render() {
    return (
      <Unveil
        maxHeight={300}
        render={notifyResize => (
          <RichContent notifyResize={notifyResize} withImage />
        )}
      />
    );
  }
}

string

This adds the given className to Unveil's root container.

object

This merges the given style with Unveil's root container styles.

number

This is the maximum height, in pixels, that is shown by the Unveil component in its collapsed state. Content surpassing maxHeight will be truncated.

function

This is a render prop for the content you want to render. It receives an argument, notifyResize, so a render prop would be a function of the form: notifyResize => <YourContent />;.

notifyResize is a function passed to the render prop that should be called when the content resizes, such as in the completion callbacks of async components and images:

<Unveil
  render={notifyResize => (
    <button
      src="https://placeimg.com/720/240/tech"
      onLoad={() => notifyResize()}
    />
  )}
/>

function

This is a render prop for the ShowMore button to render. It receives an argument, expand. For optimal use with the library, the styles bottom: 0 and position: absolute should be used.

expand is a function passed to the render prop that should be called when the button is clicked in order to expand the Unveil:

<Unveil
  render={...}
  more={expand => (
    <button
      style={{
        position: 'absolute',
        bottom: 0,
      }}
      onClick={expand}
    >
      Show More
    </button>
  )}
/>

function

This is a render prop for the ShowLess button to render. It receives an argument, collapse.

collapse is a function passed to the render prop that should be called when the button is clicked in order to collapse the Unveil:

<Unveil render={...} less={collapse => <button onClick={collapse}>Show Less</button>} />

function

This is the callback that is run after the Unveil is expanded.

function

This is the callback that is run after the Unveil is collapsed.

bool

This specifies whether or not the Unveil is initially expanded. There is probably some work to be done here to make this prop useful after the initial render.

I did not develop this library with SSR in mind and am not fully aware of any possible repercussions you may face from using this in that context. Since the initial render of Unveil is not shown onscreen, I imagine this would have a negative effect on SEO.