TextAreaTron

The TextAreaTron component is a React functional component that provides a customizable text area with additional features such as character counting and validation.

Props

prompt

• Type: string
• Description: A prompt for the Inputron engine. Examples ‘translate the text into Spanish’ or r’ewrite the text using formal language’.

customOnChange

• Type: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
• Description: An optional custom change handler function for the text area.

value

• Type: string
• Description: The current value of the text area.

triggerKeys

• Type: string[]
• Description: An optional array of keys that trigger specific actions. ENTER, TAB, etc

labelConfig

• Type: object
• Description: Configuration for the label associated with the text area.
  • content (optional): string - The text content of the label.
  • visible (optional): boolean - Whether the label is visible.
  • style (optional): string - Additional styles for the label.
  • justify (optional): string - Justification for the label content.

setTextValue

• Type: (value: string) => void
• Description: Function to set the value of the text area.

...props

• Type: React.TextareaHTMLAttributes<HTMLTextAreaElement>
• Description: Additional HTML attributes to be passed to the text area element.

buttonConfiguration

• Type: ButtonConfigType
• Description: Configuration for buttons associated with the text area.

Properties

label

• Type: string
• Description: The text label to be displayed on the button.

style

• Type: string
• Description: Additional CSS styles to be applied to the button.

disabled

• Type: boolean
• Description: A boolean indicating whether the button is disabled.

icon

• Type: React.ReactNode
• Description: An optional icon to be displayed alongside the button label.

Example Usage

import React, { useState } from 'react';
import {TextareaTron} from '@revivesoft/inputron';
 
const Example = () => {
  const [text, setText] = useState('');
 
  return (
    <TextAreaTron
      value={text}
      setTextValue={setText}
      customOnChange={(e) => console.log(e.target.value)}
      prompt="Enter your text here..."
      triggerKeys={['Enter', 'Tab']}
      labelConfig={{
        content: 'Label Text',
        visible: true,
        style: 'font-weight: bold;',
        justify: 'center',
      }}
      buttonConfiguration={{
        // Your button configuration here
      }}
      rows={5}
      cols={40}
    />
  );
};
 
export default Example;