new-shiitake

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:

name	type	description
lines	Integer	required - the number of lines to clamp to
throttleRate	Integer	optional - defaults to 200, the number of milliseconds to throttle resize events to
className	String	optional - a class name to pass to the returned outer element
tagName	String	optional - defaults to 'div', the tag name for the returned outer element
renderFullOnServer	Boolean	optional - defaults to false, this tells shiitake to render the full string on the server and in the client before it calculates the truncation. This is useful when you have prominent text that seldom needs to be trimmed.
overflowNode	Node	optional - defaults to '\u2026' (ellipsis), the text or html that indicates the string has been trimmed
onTruncationChange	Function (isTruncated: boolean) => void	optional - This is called whenever the text gets trimmed or stops being trimmed. Its useful for setting state based on whether the text has been truncated or not

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