Documentation Index
Fetch the complete documentation index at: https://mintlify.com/ragaeeb/dyelight/llms.txt
Use this file to discover all available pages before exploring further.
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}
/>
);
}
- 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
pattern
words
characters
// Highlight specific character ranges
const highlights = HighlightBuilder.ranges([
{ start: 0, end: 5, className: 'bg-yellow-200' },
{ start: 10, end: 15, style: { backgroundColor: 'pink' } }
]);
// Highlight text matching a regex pattern
const highlights = HighlightBuilder.pattern(
text,
/\b(TODO|FIXME)\b/g,
'text-red-600 font-bold'
);
// Highlight specific words
const highlights = HighlightBuilder.words(
text,
['import', 'export', 'default'],
'text-purple-600'
);
// 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: