Use React

Use this procedure to start a wand from a React component. The hook useWand needs React 18 or later.

Procedure

1. Import useWand from magic-cursor-wand/react.

2. Call useWand in the component that shows the page:

   import { useWand } from 'magic-cursor-wand/react';
   
   export function Page() {
     useWand({ config: { chalk: { size: 20 } } });
     return <main>My page</main>;
   }

3. To draw in one element only, give a ref as the second argument:

   import { useWand } from 'magic-cursor-wand/react';
   import { useRef } from 'react';
   
   export function Hero() {
     const ref = useRef<HTMLDivElement>(null);
     useWand({ touchAction: 'pan-y' }, ref);
     return <div ref={ref} style={{ position: 'relative', height: 400 }} />;
   }

4. Start the application and move the pointer. Make sure that the effects follow the pointer.

Result

The hook starts the wand when React adds the component to the page. The hook destroys the wand when React removes the component.

Rules for the options

• The hook reads effects, plugins, providers and target one time. To change them, give the component a new key.
• The hook compares config for each section. When a section changes, the hook calls setConfig.
• The hook operates correctly in StrictMode.