Textarea with adjustable segments for React

Customizable, accessible, and easy to use.

_{By Stuart Robinson}

Demo

Check out a demo here: Demo

Installation

With NPM

npm install react-segmented-textarea

Getting Started

import { TextEditor, textEditor } from 'react-segmented-textarea';


const App = () => {

const textEditor = useTextEditor()

  return (
    <TextEditor {...textEditor}>
  );
};

Documentation

Config Options

The useTextEditor hook provides functionality for managing the textarea config.

Defaults

• 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'.

Styling

• 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.

Return Value

The hook returns these properties back so that they can be passed into the TextEditor component.

Roadmap

• Add unit and e2e testing.