A modern React 19 wrapper for RoughNotation, a small JavaScript library to create and animate annotations on a web page.

• Visit website to see it in action
• Library docs
• Testing Guide
• Changelog

• React 19 Compatible - Built with the latest React features
• TypeScript Support - Full type safety and IntelliSense
• Modern Build System - Rollup 4 with ES modules and CommonJS
• Comprehensive Testing - 89.36% test coverage with Jest and React Testing Library
• Tree Shaking - Optimized bundle sizes
• SSR Ready - Works in server-side rendering environments

You can add react-rough-notation to your project via npm.

npm install --save @turahe/react-rough-notation

Or using yarn:

yarn add @turahe/react-rough-notation

Then import the components you need:

import { RoughNotation, RoughNotationGroup } from "@turahe/react-rough-notation";

import React, { useState } from 'react';
import { RoughNotation, RoughNotationGroup } from '@turahe/react-rough-notation';

function App() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        {show ? 'Hide' : 'Show'} Annotations
      </button>
      
      <RoughNotationGroup show={show}>
        <RoughNotation type="underline" color="red">
          Hello,
        </RoughNotation>
        <RoughNotation type="box" color="blue">
          This is
        </RoughNotation>
        <RoughNotation type="circle" color="green">
          a Test
        </RoughNotation>
      </RoughNotationGroup>
    </div>
  );
}

This is the main component, which renders as a span element by default but can be customized using the customElement prop.

<RoughNotation type="underline" show={state.show}>
  Hello RoughNotation
</RoughNotation>

Any unlisted prop will be passed to the component, so you can use any React prop to handle interactions or styling.

Some props can be changed after initialization without re-rendering the annotation. Here's the complete list:

Note: The type of the annotation cannot be changed. Create a new annotation for that.

This is a wrapper for multiple annotations that triggers the show() method on every child annotation after the previous annotation animation is complete. It does not render any HTML element.

<RoughNotationGroup show={state.show}>
  <RoughNotation type="underline">Hello,</RoughNotation>
  <RoughNotation type="underline">This is</RoughNotation>
  <RoughNotation type="underline">a Test</RoughNotation>
</RoughNotationGroup>

If you need to trigger annotations in a specific order, use the order prop in each RoughNotation component.

Example: Reverse order

<RoughNotationGroup show={state.show}>
  <RoughNotation type="underline" order="3">
    Hello,
  </RoughNotation>
  <RoughNotation type="underline" order="2">
    This is
  </RoughNotation>
  <RoughNotation type="underline" order="1">
    a Test
  </RoughNotation>
</RoughNotationGroup>

Note: It will annotate first the components with the order prop, and then the ones without it.

This project includes comprehensive testing with Jest and React Testing Library:

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

# Run tests in CI mode
npm run test:ci

Current Coverage: 89.36% overall with 28 passing tests

See TESTING.md for detailed testing documentation.

We maintain a detailed changelog documenting all version changes, new features, and breaking changes.

• v2.1.0: Added comprehensive testing infrastructure and GitHub Actions CI/CD
• v2.0.0: Major upgrade to React 19, TypeScript 5.9, and Rollup 4
• v1.0.0: Initial release with basic Rough Notation functionality

See CHANGELOG.md for complete version history, migration guides, and detailed change logs.

• Node.js 18+
• npm 8+ or yarn

# Clone the repository
git clone https://github.com/turahe/react-rough-notation.git
cd react-rough-notation

# Install dependencies
npm install

# Start development mode
npm start

# Build for production
npm run build

• npm start - Start development mode with watch
• npm run build - Build for production
• npm test - Run tests
• npm run test:watch - Run tests in watch mode
• npm run test:coverage - Run tests with coverage
• npm run test:ci - Run tests in CI mode

<RoughNotation type="underline" color="red" show={true}>
  This text will be underlined in red
</RoughNotation>

<RoughNotation type="box" color="blue" strokeWidth={2} show={true}>
  This text will be boxed in blue with thick strokes
</RoughNotation>

<RoughNotationGroup show={showGroup}>
  <RoughNotation type="highlight" color="yellow" order={1}>
    First
  </RoughNotation>
  <RoughNotation type="underline" color="red" order={2}>
    Second
  </RoughNotation>
  <RoughNotation type="circle" color="green" order={3}>
    Third
  </RoughNotation>
</RoughNotationGroup>

<RoughNotation type="underline" customElement="h1" show={true}>
  This will be a heading with an underline
</RoughNotation>

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Ensure all tests pass
2. Maintain test coverage above 85%
3. Follow TypeScript best practices
4. Update documentation as needed

This project is licensed under the MIT License - see the LICENSE file for details.

• RoughNotation - The original library by Preet Shihn
• React - The UI library that makes this possible
• TypeScript - For type safety and developer experience

• NPM Package
• GitHub Repository
• Original RoughNotation
• React Documentation