React clamping component, supporting both text and html inline content.

Features

• both text and html inline content can be clamped.
• configure only with max height and or max lines.
• customizable expand(read more) and or collapse(read less) options.
• customizable ellipsis.

Installation

npm install react-simple-clamp

Usage

clamp normal text

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Clamp from 'react-simple-clamp';
// or import { ClampText } from 'react-simple-clamp';

const text = 'hellowordhellowordhellowordhellowordhellowordhellowordhellowordhellowordhellowordhelloword';
const App = () => (
  <div style={{ width: 200 }}>
    <Clamp content={text} maxHeight={40} maxLines={2} />
  </div>
);

ReactDOM.render(<App />, document.querySelector('#app'));

Using renderAfter and expanded to expand(read more) or collapse(read less) component:

...
const App = () => {
  const [expanded, setExpended] = useState(false);
  return (
    <div style={{width: 200, background: '#f5f5f5', marginBottom: 30}} >
      <Clamp
        content={text}
        maxHeight={60}
        maxLines={2}
        expanded={expanded}
        renderAfter={
          (clamped) => (
            <span style={{background: '#61dafb', padding: '0 4px' }}
              onClick={() => { setExpended(!!clamped) }}>
              {clamped ? 'open' : 'close'}
            </span>
          )
        }
      />
    </div>
  )
};

clamp html

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { ClampHtml } from 'react-simple-clamp';

const html =
  'hello<span></span><span></span><span style="color: #167781">hellohellohellohellohello<i>hello</i>hellohellohellohello<span></span><span>world';
const App = () => (
  <div style={{ width: 200 }}>
    <ClampHtml content={html} maxHeight={40} maxLines={2} />
  </div>
);

ReactDOM.render(<App />, document.querySelector('#app'));

demo

API

Both default Clamp (ClampText) and ClampHtml have same props

export interface ClampProps {
  maxLines: number;
  maxHeight: number | string;
  ellipsis?: string;
  expanded?: boolean;
  content: string;
  className?: string;
  renderAfter: (clamped: boolean) => JSX.Element | JSX.Element[];
}

• maxLines: Max number of display lines
• maxHeight: Max height of component, can be configure with number of px value or string of CSS property
• ellipsis: Ellipsis content after the clamped main content
• expanded: Whether component is expanded
• content: Text to clamp, text or inline html elements
• className: Default CSS class name of component
• renderAfter: render function for the content after the main content and ellipsis content (if exist)

License

MIT