@granatum/shiitake
v2.3.0
Published
Shiitake - line clamp that won't get you fired
Downloads
3
Readme
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