Check out a demo here: Demo
npm install react-segmented-textarea
import { TextEditor, textEditor } from 'react-segmented-textarea';
const App = () => {
const textEditor = useTextEditor()
return (
<TextEditor {...textEditor}>
);
};
The useTextEditor
hook provides functionality for managing the textarea config.
-
defaultSegments
: An array of initial segments for the text editor. Default value is an empty array. -
defaultMode
: The default mode of the text editor, either 'edit', 'drag' or 'split'. Default value is 'edit'.
-
segmentStyle
: Custom CSS properties to style the text segments.
Colors defined below are provided as an array and looped over.
-
segmentBorderColors
: An array of colors for segment borders. -
segmentBackgroundColors
: An array of colors for segment backgrounds. -
segmentTextColors
: An array of colors for segment text. -
dragIndicatorComponent
: Custom component for the drag indicator that appears at each segment intersection when in drag mode. -
dragHandleComponent
: Custom component for the drag handle when a drag indicator is hovered over. -
splitIndicatorComponent
: Custom component for the split indicator that appears when the user hovers over a word. -
dragOverlayCursor
: Custom component for the drag overlay cursor that appears when the user is using the keyboard to adjust segments. -
screenReaderInstructions
: Instructions for screen readers.
The hook returns these properties back so that they can be passed into the TextEditor component.