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

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>
    </>
  )
}

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

import RoughNotation from 'rough-notation-reactor'
 
const Component = () => {
  return (
    <RoughNotation iterations={4} animationDuration={500} animationDelay={1000}>
      Customized Animation
    </RoughNotation>
  )
}

import RoughNotation from 'rough-notation-reactor'
 
const Component = () => {
  return (
    <RoughNotation
      color="red"
      padding={20}
      strokeWidth={2}
      style={{ fontSize: '3rem' }}>
      Styled Notation
    </RoughNotation>
  )
}

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>
    </>
  )
}

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

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>
    </>
  )
}