DOCSEARCHbyAlgolia
Submit Docs

react-editext

repository·master·Indexed 43 days ago

https://github.com/alioguzhan/react-editext

An editable text component for React applications (version 7.1.0) that allows users to edit text in place. It supports various HTML input types, custom validation logic, keyboard shortcuts for saving and cancelling, and high customizability via props and CSS attributes for styling view and edit modes.

Tokens
2.9K
Snippets
7
Records
9
Agent score
5%

What's inside react-editext

  1. Style <EdiText/> components with styled-components

    master

    You can customize the appearance of <EdiText/> components using styled-components or standard CSS by targeting internal HTML elements via their editext attribute. Each customizable element has a unique editext attribute value.

    Available Attribute Values

    Attr. ValueDescription
    main-containerThe main container
    view-containerThe container in view mode
    edit-containerThe container in edit mode
    button-containerThe container for the save and cancel buttons
    validation-containerThe container for the validation message area
    edit-buttonThe edit button
    save-buttonThe save button
    cancel-buttonThe cancel button
    inputThe input element (can also be selected directly via input or textarea tags)
    hintThe hint container
    button[editext='cancel-button'] {
  &:hover {
    background: crimson;
    color: #fff;
  }
}

div[editext='view-container'] {
  background: #6293c3;
  padding: 15px;
  border-radius: 5px;
  color: #fff;
}

div[editext='validation-container'] {
  color: #d3d3d3;
  text-decoration: underline;
}

input,
textarea {
  background: #1d2225;
  color: #f4c361;
  font-weight: bold;
  border-radius: 5px;
}

  3. Set up the development environment

    master

    You can set up the development environment using Nix or standard Yarn commands.

    Using Nix

    Run the following commands to start a tmux session for both the library and the example app:

    nix-shell --pure
develop

    Using Yarn (Without Nix)

    1. Install dependencies and start the rollup watch process for the library:
    yarn install
yarn start
    1. Navigate to the example/ folder, install dependencies, and start the example app:
    cd example
yarn install
yarn start
    1. Open http://localhost:3000/ in your browser.

  4. Basic usage of EdiText

    master

    EdiText is a highly customizable editable text component. To use it, import EdiText and manage the text state in your parent component. Use the onSave prop to capture the updated value when the user finishes editing.

    Key props used in this example:

    • type: The type of input (e.g., "text").
    • value: The current text value.
    • onSave: A callback function triggered when the text is saved.
    import React, { useState } from 'react';

import EdiText from 'react-editext';

function Example(props) {
  const [value, setValue] = useState('What is real? How do you define real?');

  const handleSave = (val) => {
    console.log('Edited Value -> ', val);
    setValue(val);
  };
  return (
    <div className="container">
      <EdiText type="text" value={value} onSave={handleSave} />
    </div>
  );
}

  5. Reference the EdiText props API

    master

    The EdiText component accepts a wide range of props to control its behavior, appearance, and validation.

    Required Props

    • value (string): The current value of the content and the input during edit mode.
    • onSave (function): Callback triggered when the save button is clicked. Receives (value, inputProps) as arguments.

    Common Configuration Props

    • type (string): The HTML input type. Options: text, password, number, email, textarea, date, datetime-local, time, month, url, week, tel. Defaults to text.
    • onCancel (function): Callback triggered when editing is cancelled. Receives (value, inputProps).
    • canEdit (function | boolean): Determines if the component is in read-only mode. Defaults to true.
    • editOnViewClick (boolean): If true, clicking the view text activates the editor. Defaults to false.
    • submitOnEnter (boolean): If true, pressing Enter submits the form. Defaults to false.
    • cancelOnEscape (boolean): If true, pressing Escape cancels the form. Defaults to false.
    • cancelOnUnfocus (boolean): If true, clicking outside the input cancels the form. Defaults to false.
    • submitOnUnfocus (boolean): If true, clicking outside the input submits the form. Defaults to false.
    • startEditingOnFocus (boolean): Activates edit mode when the view container is focused. Defaults to false.
    • startEditingOnEnter (boolean): Activates edit mode when the Enter key is pressed. Defaults to false.
    • showButtonsOnHover (boolean): If true, action buttons are only visible when hovering over the text. Defaults to false.
    • buttonsAlign (string): Position of action buttons. Use before to place them before the input, otherwise defaults to after.

    Validation Props

    • validation (function): A custom validation function that takes value and returns true or false.
    • validationMessage (node): The message displayed if validation fails.
    • onValidationFail (function): Callback triggered when validation fails.

    Styling and Customization Props

    • inputProps (object): Attributes passed directly to the HTML input element.
    • viewProps (object): Attributes passed to the div displaying the text in view mode.
    • containerProps (object): Attributes passed to the main wrapper div.
    • buttonsContainerProps (object): Attributes passed to the div containing the action buttons.
    • editButtonProps (object): Attributes passed to the edit button.
    • renderValue (function): Custom render function to customize how the value is displayed in view mode.
    • hint (node): A hint message displayed at the bottom of the input.
    • saveButtonContent / cancelButtonContent / editButtonContent (node): Custom content (e.g., icons) for the action buttons.
    • saveButtonClassName / cancelButtonClassName / editButtonClassName (string): Custom CSS classes for the buttons.
    • viewContainerClassName / editContainerClassName (string): Custom CSS classes for the view and edit containers.
    • hideIcons (boolean): If true, removes default icons from buttons. Defaults to false.
    • tabIndex (number): A shortcut to apply the same tabIndex to both the view and input elements.

  6. Use the EdiText component

    master

    The EdiText component is a React component that provides an inline editing experience. It toggles between a 'view mode' (displaying text) and an 'edit mode' (displaying an input or textarea).

    Key features include:

    • Support for various input types (text, textarea, email, number, etc.).
    • Custom validation logic.
    • Customizable action buttons (Save, Cancel, Edit).
    • Keyboard shortcuts (Enter to save, Escape to cancel).
    • Automatic activation via click, focus, or Enter key.

    To use it, provide a value and an onSave callback.

    import EdiText from 'react-editext';

function MyComponent() {
  const [text, setText] = useState('Hello World');

  return (
    <EdiText
      value={text}
      onSave={(newValue) => {
        setText(newValue);
      }}
    />
  );
}

  7. Configure EdiTextProps

    master

    The EdiTextProps interface defines all configuration options for the component.

    Core Props

    • value (required): The current value to display in view mode and use in edit mode.
    • onSave (required): Callback function triggered when the user saves changes. Receives (value, inputProps).
    • type: The type of input to render. Options: 'text' | 'textarea' | 'email' | 'number' | 'date' | 'datetime-local' | 'time' | 'month' | 'url' | 'week' | 'tel'. Defaults to 'text'.

    Interaction & Behavior

    • editOnViewClick: If true, clicking the view container activates edit mode. Defaults to false.
    • editing: Controlled state to force the component into edit mode. Defaults to false.
    • canEdit: A boolean or a function () => boolean that determines if the edit button should allow entering edit mode.
    • showButtonsOnHover: If true, action buttons are only visible when hovering over the text. Defaults to false.
    • submitOnEnter: If true, pressing Enter saves the form. Defaults to false.
    • cancelOnEscape: If true, pressing Escape cancels the form. Defaults to false.
    • cancelOnUnfocus: If true, losing focus cancels the form. Defaults to false.
    • submitOnUnfocus: If true, losing focus saves the form. Defaults to false.
    • startEditingOnFocus: If true, focusing the view container activates edit mode.
    • startEditingOnEnter: If true, pressing Enter while the view container is focused activates edit mode.

    Validation

    • validation: A function (value: string) => boolean | Promise<boolean> used to validate the input before saving.
    • onValidationFail: Callback triggered when validation returns false. Receives the current value.
    • validationMessage: The message to display when validation fails. If not provided, a default message is used.

    Customization & Styling

    • inputProps: Props passed directly to the underlying <input> or <textarea>.
    • viewProps: Props passed to the <div> used for displaying the text in view mode.
    • editButtonProps: Props passed to the edit button.
    • containerProps: Props passed to the root container.
    • buttonsContainerProps: Props passed to the container holding the action buttons.
    • className: Custom class name for the root container.
    • buttonsAlign: Position of buttons relative to the input. Options: 'after' (default) or 'before'.
    • renderValue: A function (value: any) => any to customize how the value is rendered in view mode (can return JSX).
    • hideIcons: If true, default icons on action buttons are hidden.
    • cancelButtonContent, saveButtonContent, editButtonContent: Custom content (JSX/nodes) for the buttons.
    • cancelButtonClassName, saveButtonClassName, editButtonClassName: Custom class names for buttons.
    • viewContainerClassName, editContainerClassName: Custom class names for the mode-specific containers.

  8. EdiTextType

    master

    Defines the allowed input types for the EdiText component. This determines which HTML input type is used or if a textarea is rendered.

    export type EdiTextType =
  | 'text'
  | 'textarea'
  | 'email'
  | 'number'
  | 'date'
  | 'datetime-local'
  | 'time'
  | 'month'
  | 'url'
  | 'week'
  | 'tel';