Naturally Processed Meals

    rough-notation-reactor

    1.2.0 • Public • Published

    rough-notation-reactor

    A wrapper that makes Roigh Notation a React Component.

    npm package

    Install

    With NPM

    npm install rough-notation-reactor

    With Yarn

    yarn add rough-notation-reactor

    Usage

    import RoughNotation from 'rough-notation-reactor'
     
    const Component = () => {
      return <RoughNotation>Underlined Text</RoughNotation>
    }

    Storybook

    To see it in action, visit Storybook Page

    Types

    • underline (default)
    • box
    • circle
    • highlight
    • strike-through
    • crossed-off
    import RoughNotation from 'rough-notation-reactor'
     
    const Component = () => {
      return (
        <>
          <RoughNotation type="box">Wrapped with Box</RoughNotation>
          <RoughNotation type="circle">Wrapped with Circle</RoughNotation>
          <RoughNotation type="highlight">Highlighted</RoughNotation>
          <RoughNotation type="strike-through">Strike Through</RoughNotation>
          <RoughNotation type="crossed-off">Crossed Off</RoughNotation>
        </>
      )
    }

    No Animation

    import RoughNotation from 'rough-notation-reactor'
     
    const Component = () => {
      return <RoughNotation animate={false}>Wrapped with Box</RoughNotation>
    }

    Animation Settings

    Prop Value Type Default
    animationDuration Number in ms 800
    animationDelay Number in ms 0
    iterations Number 2
    import RoughNotation from 'rough-notation-reactor'
     
    const Component = () => {
      return (
        <RoughNotation iterations={4} animationDuration={500} animationDelay={1000}>
          Customized Animation
        </RoughNotation>
      )
    }

    Styling

    Prop Value Type Default
    color String currentColor
    padding Number 5
    strokeWith Number 1
    import RoughNotation from 'rough-notation-reactor'
     
    const Component = () => {
      return (
        <RoughNotation
          color="red"
          padding={20}
          strokeWidth={2}
          style={{ fontSize: '3rem' }}>
          Styled Notation
        </RoughNotation>
      )
    }

    Show/Hide

    Rough Notation is allowed you to show and hide notations

    import React, { useState } from 'react'
    import RoughNotation from 'rough-notation-reactor'
     
    const Component = () => {
      const [show, setShow] = useState(true)
     
      return (
        <>
          <button onClick={() => setShow(!show)}>Show/Hide</button>
          <RoughNotation show={show}>Customized Animation</RoughNotation>
        </>
      )
    }

    Render As Any Tag

    Defaultly notations renders as span. You can customize it.

    import RoughNotation from 'rough-notation-reactor'
     
    const Component = () => {
      return <RoughNotation as="b">Bold Notation</RoughNotation>
    }

    Grouping Notations

    import React, { useState } from 'react'
    import RoughNotation from 'rough-notation-reactor'
     
    const Component = () => {
      const [show, setShow] = useState(true)
     
      return (
        <>
          <p>
            <RoughNotation show={show}>Lorem ipsum</RoughNotation> dolor sit amet,
            consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
            et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in
            <RoughNotation show={show}>
              voluptate velit esse cillum
            </RoughNotation> dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            <RoughNotation show={show}>anim id est laborum</RoughNotation>.
          </p>
          <button onClick={() => setShow(!show)}>Show/Hide</button>
        </>
      )
    }

    Install

    npm i rough-notation-reactor

    DownloadsWeekly Downloads

    3

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    74.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • cooskun