import { useEffect } from "react";
import { useVeltClient } from "@veltdev/react";

export default function App() {
  let { client } = useVeltClient();

  useEffect(() => {
    if (client) {
      //Enable Rewriter
      const rewriterElement = client.getRewriterElement();
      rewriterElement.enableRewriter();
      rewriterElement.disableRewriter(); //to disable
    }
  }, [client]);

  return (
    // your app template
  );
}
1

Get the Velt client

Import the useVeltClient React hook.

You can use this hook within your component to fetch the Velt client.

React
let { client } = useVeltClient();
2

Create a useEffect hook

Create a useEffect hook with the client as dependency.

React
useEffect(() => {
  //code to enable Rewriter
}, [client]);
3

Enable Rewriter

Rewriter is not enabled by default.

Within the useEffect hook, call client.getRewriterElement() and then enableRewriter() on the returned object to enable Rewriter.

Now when a user highlights text on your website, the Rewriter tool will pop up.

React
const rewriterElement = client.getRewriterElement();
rewriterElement.enableRewriter();
rewriterElement.disableRewriter(); //to disable
4

Test Rewriter

Test out Rewriter by highlighting some text.

import { useEffect } from "react";
import { useVeltClient } from "@veltdev/react";

export default function App() {
  let { client } = useVeltClient();

  useEffect(() => {
    if (client) {
      //Enable Rewriter
      const rewriterElement = client.getRewriterElement();
      rewriterElement.enableRewriter();
      rewriterElement.disableRewriter(); //to disable
    }
  }, [client]);

  return (
    // your app template
  );
}