1.2.0 • Published 4 years ago
rough-notation-reactor v1.2.0
rough-notation-reactor
A wrapper that makes Roigh Notation a React Component.
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>
</>
)
}