Basic usage

Learn how to use DyeLight with simple highlighting examples

DyeLight is a React textarea component that supports text highlighting using absolute character positions. This guide covers the fundamentals of using DyeLight in your application.

Simple example

Here’s a basic example using React’s useState hook:

import React, { useState } from 'react';
import { DyeLight, HighlightBuilder } from 'dyelight';

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}
        />
    );
}

In this example:

• Characters 0-5 ("Hello") are highlighted with a yellow background
• Characters 12-24 ("This is line") are highlighted with a blue background
• The component automatically handles multi-line text

How highlighting works

DyeLight uses absolute positions across the entire text:

• Position counting starts at 0
• Newline characters (\n) count as 1 character each
• The end position is exclusive (not included in the highlight)

Unlike line-based editors, you don’t need to calculate line numbers or column positions. Just count characters from the start of the text.

Adding multiple highlights

You can combine multiple highlight types:

function MultiHighlight() {
    const [text, setText] = useState('function hello() {\n  console.log("Hi");\n}');

    // Highlight the function keyword
    const keywords = HighlightBuilder.pattern(
        text,
        /\b(function|console|log)\b/g,
        'text-blue-600 font-semibold'
    );

    // Highlight the string
    const strings = HighlightBuilder.pattern(
        text,
        /"[^"]*"/g,
        'text-green-600'
    );

    return (
        <DyeLight
            value={text}
            onChange={setText}
            highlights={[...keywords, ...strings]}
            className="font-mono text-sm"
        />
    );
}

Using HighlightBuilder utilities

The HighlightBuilder provides several utility methods:

ranges

// Highlight specific character ranges
const highlights = HighlightBuilder.ranges([
    { start: 0, end: 5, className: 'bg-yellow-200' },
    { start: 10, end: 15, style: { backgroundColor: 'pink' } }
]);

pattern

// Highlight text matching a regex pattern
const highlights = HighlightBuilder.pattern(
    text,
    /\b(TODO|FIXME)\b/g,
    'text-red-600 font-bold'
);

words

// Highlight specific words
const highlights = HighlightBuilder.words(
    text,
    ['import', 'export', 'default'],
    'text-purple-600'
);

characters

// Highlight individual characters
const highlights = HighlightBuilder.characters([
    { index: 0, className: 'bg-red-200' },
    { index: 5, className: 'bg-blue-200' }
]);

With inline styles

You can use CSS classes or inline styles:

const highlights = HighlightBuilder.ranges([
    // Using a CSS class
    { start: 0, end: 5, className: 'highlight-keyword' },
    
    // Using inline styles
    { start: 10, end: 15, style: { 
        backgroundColor: 'yellow',
        fontWeight: 'bold'
    }}
]);

Auto-resize behavior

By default, DyeLight automatically adjusts its height to fit the content:

// Auto-resize enabled (default)
<DyeLight
    value={text}
    onChange={setText}
    enableAutoResize={true}
/>

// Auto-resize disabled (allows manual vertical resize)
<DyeLight
    value={text}
    onChange={setText}
    enableAutoResize={false}
    rows={10}
/>

When enableAutoResize is disabled, users can manually resize the textarea vertically by dragging the bottom edge.

Next steps

Now that you understand the basics, explore more advanced use cases:

• Syntax highlighting - Build a code editor with keyword and string highlighting
• Error highlighting - Highlight validation errors and warnings
• Styling - Customize the appearance with CSS classes