A React component library for editable content with variable highlighting and Radix UI popovers/tooltips. Perfect for forms, templates, and dynamic content where users can insert predefined variables.

Note: This library uses Shadcn UI conventions and Radix UI under the hood for popovers and tooltips. You need to include Tailwind CSS in your project for proper styling.

Features

• ContentEditable component with live highlighting of variables
• Automatically shows a list of available variables
• Copy variable to clipboard with tooltip feedback
• Radix UI popovers and tooltips included
• Fully styled with Tailwind CSS, supports dark mode
• No automatic CSS injection — you must include Tailwind in your project

Installation

npm install @f47/variabler

or with Yarn:

yarn add @f47/variabler

Usage

import { useState } from "react";
import { Variabler } from "@f47/variabler";
import "@f47/variabler/dist/index.css";

function App() {
  const [text, setText] = useState("");

  return (
    <Variabler
      value={text}
      onChange={setText}
      variables={["firstName", "lastName"]}
      symbol="$" // optional, default is '$'
    />
  );
}

export default App;

⚠️ Styling will only work if Tailwind CSS is configured in your project.

Variabler Usage using RHF, Zod and Shadcn UI

import { Variabler } from "@f47/variabler";
import "@f47/variabler/dist/index.css";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import "./App.css";

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
} from "@/components/ui/form";
import { Button } from "./components/ui/button";

const schema = z.object({
  body: z.string().nonempty({
    message: "Required",
  }),
});
type SchemaType = z.infer<typeof schema>;

function App() {
  const form = useForm<SchemaType>({
    resolver: zodResolver(schema),
    defaultValues: {
      body: "",
    },
  });
  const onSubmit = (data: SchemaType) => {
    console.log(data);
  };
  return (
    <div className="flex flex-col justify-center items-center mx-auto max-w-2xl min-h-svh">
      <h1 className="mb-3 text-2xl text-start">Meet Variabler</h1>
      <Form {...form}>
        <form
          action=""
          onSubmit={form.handleSubmit(onSubmit)}
          className="w-full"
        >
          <FormField
            name="body"
            control={form.control}
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <Variabler
                    value={field.value}
                    onChange={field.onChange}
                    variables={[
                      "firstName",
                      "lastName",
                      "jobTitle",
                      "companyName",
                      "skills",
                      "industry",
                      "applicantName",
                    ]}
                    wrapperClassName="w-full"
                  />
                </FormControl>
                <FormMessage className="text-red-500" />
              </FormItem>
            )}
          />
          <div className="flex justify-end mt-5">
            <Button className="cursor-pointer">Submit</Button>
          </div>
        </form>
      </Form>
      <div className="p-4 mt-4 w-full bg-gray-50 rounded-lg border border-gray-300 output">
        <h2 className="mb-2 text-lg font-semibold text-gray-800">Output</h2>
        <p className="text-gray-700 whitespace-pre-wrap break-words">
          {form.watch("body")}
        </p>
      </div>
    </div>
  );
}

export default App;

Props

| Prop | Type | Description | | ------------------ | -------------------------------------- | --------------------------------------- | | value | string | Controlled content | | onChange | (value: string) => void | Callback when content changes | | variables | string[] | List of allowed variables | | symbol | string | Symbol before variables (default "$") | | className | string | Extra styling for the editable box | | wrapperClassName | string | Extra styles for the wrapper div | | ...props | React.ComponentProps<HTMLDivElement> | Other standard ContentEditable props |

License

MIT © Fares Galal