Nice Paintings, Mondrian

    @granatum/shiitake
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    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

    Install

    npm i @granatum/shiitake

    DownloadsWeekly Downloads

    0

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    40 kB

    Total Files

    8

    Last publish

    Collaborators

    • nexissis
    • morr123456789
    • newsiberian