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 = 'Cooking 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

** NOTE: Shiitake version three is now out! **

The primary change with v3 is that we drop support for React versions lower than 16.8. This allows Shiitake to be written with hooks. In the re-write I was able to fix several bugs that were hard to deal identify and reason about in a Class Component. I was also able to make some performance improvements, specifically around resize handling and a better debouncing hook. These things could have been done without hooks, but I find hooks make it easy to reason about things and identify opportunities for improvements and flawed logic.

The other big difference is the new "attributes" prop. This allows you to pass any valid JSX attributes (props) into the outer rendered element. This is the same element that is defined by the "tagName" prop. This way you can have more control over the rendered result. We also added classes for some of the inner spans which you can target in css for further control. In this change we dropped support for passing event handlers like "onClick" at the top level Shiitake props, but you can pass them now in attributes. This means any event supported by the tagName of your choice is now supported in addition to other attributes like "title", "href" etc. The top level "className" prop is deprecated in favor of passing className inside of "attributes", but is still supported until the next major version when it will be removed.

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
attributes	Object	optional - allows you to pass HTMLAttributes to the rendered outer element. You can pass valid attributes for any whitelisted react element (see tagName property). In Typescript the type is a union of the HTMLAttributes for each whitelisted element type or tagName.
className	String	*NOTE* this is supported for now but is deprecated in favor of the attributes prop (which allows you to pass className and much more)
tagName	String	optional - defaults to 'div', the tag name for the returned outer element. The valid options are: 'div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span' and 'a'.
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 the attributes prop, which will forward all props to the rendered outermost JSX element. For more information about events in React, and a comprehensive list, see this page