Shiitake

React Line clamp that won't get you fired.

My boss once worked on an app that had a Javascript line clamp that truncated words. Then one day the term "Cooking with Shiitake" made it into the UI and you can imagine how it got trimmed. Trimming words is dangerous, don't risk it. We've built a react component that handles this for you both responsively and responsibly.

Download with NPM:

$ npm install --save shiitake

Then you can use it like this:

import Shiitake from 'shiitake';

export class App extends React.Component {
  render() {
    const text = 'Cook it up all night with Shitakes';

    return (
      <div>
        <h1>Shiitake Demo</h1>
        <Shiitake lines={2} throttleRate={200} className="my-element" tagName="p">
          {text}
        </Shiitake>
      </div>
    );
  }
}

Demo:

$ git clone https://github.com/bsidelinger912/shiitake.git
$ cd shiitake
$ npm install && npm run dev

CodePen demo: http://codepen.io/bsidelinger912/pen/zBgwmd

Props:

Events

Event handlers for mouse events such as onClick can be passed through as props and will given to the returned outer element. Below is a list of events that are currently passed along. We can add more easily as use cases arise. For more information about events in React, and a comprehensive list, see this page

Supported events (feel free to ask for more):

• onClick
• onContextMenu
• onDoubleClick
• onDrag onDragEnd
• onDragEnter
• onDragExit
• onDragLeave
• onDragOver
• onDragStart
• onDrop
• onMouseDown
• onMouseEnter
• onMouseLeave
• onMouseMove
• onMouseOut
• onMouseOver
• onMouseUp