Need help with react-rough-notation?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

linkstrifer
200 Stars 8 Forks MIT License 64 Commits 5 Opened issues

Description

React wrapper for rough-notation

Services available

!
?

Need anything else?

Contributors list

# 50,630
C++
Arduino
Rust
react-m...
3 commits
# 3,074
HTML
TypeScr...
Shell
html5-c...
1 commit

Rough Notation React (Wrapper)

npm

This is a React wrapper for RoughNotation, a small JavaScript library to create and animate annotations on a web page.

Rough Notation logo

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

  Hello 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 | | brackets |
enum
or [
enum
] from
left
,
right
,
top
,
bottom
|
right
| Value could be a string or an array of strings, each string being one of these values:
left
,
right
,
top
,
bottom
. When drawing a bracket, this configures which side(s) of the element to bracket. | | 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. | | multiline |
boolean
|
false
| This property only applies to inline text. To annotate multiline text (each line separately), set this property to true. | | order |
number
,
string
| | Annotation order to animate if is inside an Annotation Group | | 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 |
enum
from (Type values)[#type-values] |
underline
| It sets the annotation style |

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

  Hello,
  This is
  a Test

Props

| name | type | default | description | | ---- | ------- | ------- | -------------------------- | | show | boolean | | show/hides the annotations |

Custom order

If you need to trigger annotations in a specific order, use the

order
prop in each
RoughAnnotation
component.

i.e: Reverse order

  
    Hello,
  
  
    This is
  
  
    a Test
  

Note: It will annotate first the components with the

order
prop, and then the ones without it.

Playground

You can find a CodeSandbox demo here

TODO

  • [ ] Auto compile and publish to npm
  • [ ] Testing

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.