Install

doodle-ui is a React 18+ library. rough.js ships with the package. React stays a peer dependency.

Package

npm install doodleui-react
pnpm add doodleui-react
yarn add doodleui-react

Quickstart

Wrap the tree once. TooltipProvider is required for tooltips. SketchSeedProvider is required for Shuffle.

import {
  SketchSeedProvider,
  TooltipProvider,
  Button,
  useSketchSeed,
} from "doodleui-react";

function Shuffle() {
  const { shuffle } = useSketchSeed();
  return <Button onClick={shuffle}>Shuffle</Button>;
}

export function App() {
  return (
    <SketchSeedProvider>
      <TooltipProvider>
        <Shuffle />
        <Button variant="primary">Hello</Button>
      </TooltipProvider>
    </SketchSeedProvider>
  );
}