Quick start

Get started with DyeLight in minutes with this step-by-step guide

Quick start

This guide will help you create your first DyeLight component with character highlighting in just a few steps.

1. Import DyeLight

   Start by importing the DyeLight component and HighlightBuilder utility:

   import React, { useState } from 'react';
   import { DyeLight, HighlightBuilder } from 'dyelight';
   
2. Create a basic component

   Set up a simple controlled component with state:

   function MyEditor() {
     const [text, setText] = useState('Hello world\nThis is line 2');
   
     return (
       <DyeLight
         value={text}
         onChange={setText}
         className="w-full p-2 border rounded"
         rows={4}
       />
     );
   }
   

   DyeLight supports both controlled (value + onChange) and uncontrolled (defaultValue) usage, just like native textareas.

3. Add character highlights

   Use the HighlightBuilder to create highlights using absolute character positions:

   function MyEditor() {
     const [text, setText] = useState('Hello world\nThis is line 2');
   
     // Highlight characters 0-5 (absolute positions)
     const highlights = HighlightBuilder.ranges([
       { start: 0, end: 5, className: 'bg-yellow-200' },
       { start: 12, end: 24, className: 'bg-blue-200' },
     ]);
   
     return (
       <DyeLight
         value={text}
         onChange={setText}
         highlights={highlights}
         className="w-full p-2 border rounded"
         rows={4}
       />
     );
   }
   

   This will highlight “Hello” (positions 0-5) in yellow and “This is line” (positions 12-24) in blue.

4. Try pattern-based highlighting

   For more advanced use cases, use pattern matching to highlight keywords or regex patterns:

   function CodeEditor() {
     const [code, setCode] = useState(`function hello() {
   const message = "Hello World";
   console.log(message);
   }`);
   
     // Highlight JavaScript keywords
     const keywordHighlights = HighlightBuilder.pattern(
       code,
       /\b(function|const|let|var|if|else|for|while)\b/g,
       'text-blue-600 font-semibold'
     );
   
     // Highlight strings
     const stringHighlights = HighlightBuilder.pattern(
       code,
       /"[^"]*"/g,
       'text-green-600'
     );
   
     return (
       <DyeLight
         value={code}
         onChange={setCode}
         highlights={[...keywordHighlights, ...stringHighlights]}
         className="font-mono text-sm"
         enableAutoResize
       />
     );
   }
   

   The enableAutoResize prop automatically adjusts the textarea height based on content.

Common highlighting patterns

Here are some common use cases to get you started:

Highlight specific words

const highlights = HighlightBuilder.words(
  text,
  ['TODO', 'FIXME', 'NOTE'],
  'bg-yellow-200 font-bold'
);

Highlight individual characters

const highlights = HighlightBuilder.characters([
  { index: 0, className: 'bg-red-200' },
  { index: 5, className: 'bg-blue-200' },
  { index: 10, style: { backgroundColor: 'yellow' } },
]);

Highlight entire lines

const lineHighlights = HighlightBuilder.lines([
  { line: 0, className: 'bg-red-100' },
  { line: 2, color: '#e8f5e8' },
]);

<DyeLight
  value={text}
  onChange={setText}
  lineHighlights={lineHighlights}
/>

Styling with Tailwind CSS

DyeLight works great with Tailwind CSS. Use containerClassName for outer styling (borders, focus rings) and className for inner styling (padding, typography):

<DyeLight
  containerClassName="rounded-md border border-input bg-background shadow-sm focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50"
  className="w-full bg-transparent px-3 py-2 text-base outline-none"
  placeholder="Start typing..."
  value={text}
  onChange={setText}
/>

Next steps

API reference

Explore all available props and methods

HighlightBuilder

Learn about all highlighting utilities

Advanced features

Discover debugging and performance optimization

Live demo

Try DyeLight in action