interviewer-components v0.0.2

React Ellipsis

React Ellipsis is a React component that lets Cross-browser multiline text ellipsis.

Contents

• Installation
• Usage
• Props

Installation

npm i --save-dev react-ellipsis-pjs

Usage

Example01:

import React from 'react';
import Ellipsis from 'react-ellipsis-pjs';

class MyComponent extends React.Component {
  render() {
    const {value} = this.props;
    return (
      <Ellipsis lines={1}>
        {value}
      </Ellipsis>
    );
  }
}

Render:

If MyComponent.props.value :

Apple
Banana
Orange

It render:

Apple...

Example02:

import React from 'react';
import Ellipsis from 'react-ellipsis-pjs';

class MyComponent extends React.Component {
  render() {
    const {value} = this.props;
    const props = {
      lines: 2,
      suffix: '......',
      custom: (ellipsisText, isEllipsis) => {
        if (!isEllipsis) return ellipsisText;
        return (
          <div title={value} style={{whiteSpace: 'pre-wrap'}}>{ellipsisText}</div>
        );
      }
    };
    return (
      <Ellipsis {...props} >
        {value}
      </Ellipsis>
    );
  }
}

Render:

e.g.1

If MyComponent.props.value :

Apple

It render:

Apple

e.g.2

If MyComponent.props.value :

Apple
Banana
Orange

It render:

<div title="Apple\nBanana\nOrange">
  Apple
  Banana......
<div>

Props