Design
Setup
Design
Setup
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
);
}
React / Next.js
HTML
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
);
}