Rough Notation React (Wrapper)
This is a React wrapper for RoughNotation, a small JavaScript library to create and animate annotations on a web page.
Table of contents
Installation
You can add rough-notation to your project via npm.
npm install --save react-rough-notation
Then just import the components you need.
import { RoughNotation, RoughNotationGroup } from "react-rough-notation";RoughNotation Component
This is the main component, is a span element by default but you can change the tag name by anything you want using the customElement prop.
Usage
<RoughNotation type="underline" show={state.show}>
Hello RoughNotation
</RoughNotation>Props
Any unlisted prop will be pass to the component so you can use any react prop to handle interactions or styling.
| name | type | default | description |
|---|---|---|---|
| animate | boolean |
true |
Turn on/off animation when annotating |
| animationDelay | number |
0 |
Delay in animation in milliseconds |
| animationDuration | number |
800 |
Duration of the animation in milliseconds |
| color | string |
String value representing the color of the annotation sketch | |
| customElement | string |
span |
Element wrapper tagName |
| getAnnotationObject | function |
(annotation) => {} |
Callback function called after annotation init, it will receive the javascript annotation object as a param |
| iterations | number |
2 |
By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations. |
| padding | number, [top, right, bottom, left], [vertical, horizontal] |
5 |
Padding in pixels between the element and roughly where the annotation is drawn. If you wish to specify different top, left, right, bottom paddings, you can set the value to an array akin to CSS style padding [top, right, bottom, left] or just [top & bottom, left & right] |
| show | boolean |
false |
Show/hide the annotation |
| strokeWidth | number |
`1 | Width of the annotation strokes |
Type values
| value | description |
|---|---|
| underline | Create a sketchy underline below an element |
| box | This style draws a box around the element |
| circle | Draw a circle around the element |
| highlight | Creates a highlight effect as if maked by a highlighter |
| strike-through | This style draws a box around the element |
| crossed-off | This style draws a box around the element |
Updating Styles
Some props can be changed after the initialization without re-rendering the annotation. i.e: if you like to change the color, just change the color prop, here is the complete list:
| Prop |
|---|
| animated |
| animationDuration |
| color |
| padding |
| strokeWidth |
Note: the type of the annotation cannot be changed. Create a new annotation for that.
RoughNotationGroup Component
This is a wrapper for multiple annotations, it will trigger the show() method on every child annotation after the prev annotation animation is complete. It does not render any HTML element.
Usage
<RoughNotationGroup show={state.show}>
<RoughNotation type="underline">Hello,</RoughNotation>
<RoughNotation type="underline">This is</RoughNotation>
<RoughNotation type="underline">a Test</RoughNotation>
</RoughNotationGroup>Props
| name | type | default | description |
|---|---|---|---|
| show | boolean | show/hides the annotations |
Playground
You can find a CodeSandbox demo here
TODO
- Add group annotation custom order support
- Auto compile and publish to npm
- Testing