@nobrainers/react-click-edit 📝

🎥 Demo

https://github.com/user-attachments/assets/58c8cca5-878a-4e64-aa06-a8e202318f2a

A lightweight, easy-to-use React component that makes any text editable with a click!

✨ Features

• 🎯 Simple and intuitive API
• 🎨 Fully customizable styling
• 🔄 Controlled component
• 🚀 TypeScript support
• 🎨 Custom icons support
• 📝 Label support
• 🔤 Multiple input types

📦 Installation

npm install @nobrainers/react-click-edit

CSS Import

The component requires its base CSS file to be imported. Add the following import to your application:

import "@nobrainers/react-click-edit/dist/style.css";

🚀 Quick Start

import { InputClickEdit } from "@nobrainers/react-click-edit";

function App() {
  const [name, setName] = useState("John Doe");

  return <InputClickEdit value={name} onChange={setName} />;
}

🔧 Props

| Prop | Type | Required | Default | Description | | ----------------- | -------------------------------------- | -------- | -------- | ----------------------------------------- | | value | string | Yes* | - | Controlled text value to display and edit | | defaultValue | string | No | - | Initial uncontrolled value | | type | string | No | "text" | HTML input type attribute | | onChange | ChangeEventHandler<HTMLInputElement> | Yes* | - | HTML input onChange handler | | isEditing | boolean | No | false | Control the editing state | | label | string | No | "" | Label for the input field | | className | string | No | "" | Container class name | | editButtonLabel | React.ReactNode | No | "Edit" | Custom edit button label | | saveButtonLabel | React.ReactNode | No | "Save" | Custom save button label | | showIcons | boolean | No | false | Toggle button icons visibility | | iconsOnly | boolean | No | false | Show only icons without text labels | | editIcon | React.ElementType | No | LuPencil | Custom edit icon component | | saveIcon | React.ElementType | No | LuCheck | Custom save icon component | | iconPosition | "left" | "right" | No | "left" | Position of icons in buttons | | onEditButtonClick | () => void | No | () => {} | Callback when edit button is clicked | | onSaveButtonClick | () => void | No | () => {} | Callback when save button is clicked |

*Either value + onChange (controlled) or defaultValue (uncontrolled) must be provided.

💡 Examples

Basic Usage

function BasicExample() {
  const [name, setName] = useState("John Doe");
  return <InputClickEdit value={name} onChange={setName} />;
}

With Label and Number Input

<InputClickEdit
  label="Age"
  type="number"
  value="25"
  onChange={(value) => console.log(value)}
/>

With Icons and Custom Styling

<InputClickEdit
  value="Click me to edit"
  showIcons
  iconPosition="right"
  className="container"
  inputClassName="custom-input"
  saveButtonClassName="save-btn"
  editButtonClassName="edit-btn"
  editWrapperClassName="edit-wrapper"
/>

Custom Icons and Labels

import { FiEdit } from "react-icons/fi";
import { FiSave } from "react-icons/fi";

<InputClickEdit
  value="Custom everything"
  showIcons
  editIcon={FiEdit}
  saveIcon={FiSave}
  editButtonLabel="Modify"
  saveButtonLabel="Update"
/>;

Controlled Editing State

function ControlledExample() {
  const [isEditing, setIsEditing] = useState<boolean>(false);
  const [value, setValue] = useState<string>("Control me");

  return (
    <InputClickEdit
      value={value}
      isEditing={isEditing}
      onEditButtonClick={() => setIsEditing(true)}
      onSaveButtonClick={() => setIsEditing(false)}
      onChange={setValue}
    />
  );
}

With Icons Only

<InputClickEdit
  value="Icons only"
  showIcons
  iconsOnly
  editIcon={FiEdit}
  saveIcon={FiSave}
/>

React Hook Form Integration

import { useForm, Controller } from "react-hook-form";
import { InputClickEdit } from "@nobrainers/react-click-edit";

function FormExample() {
  const { control, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="editableText"
        control={control}
        defaultValue="Edit me"
        render={({ field }) => (
          <InputClickEdit {...field} onChange={field.onChange} />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Register Example

import { useForm } from "react-hook-form";
import { InputClickEdit } from "@nobrainers/react-click-edit";

function RegisterExample() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <InputClickEdit {...register("editableText")} />
      <button type="submit">Submit</button>
    </form>
  );
}

🎨 Styling

The component comes with minimal default styling through its base CSS file. You can override these styles or add additional styling using CSS classes. All main elements accept custom class names through props.

Default Styling

Import the default styles in your application:

import "@nobrainers/react-click-edit/dist/style.css";

Custom Styling

Example with CSS modules:

import "@nobrainers/react-click-edit/dist/style.css"; // Base styles
import styles from "./styles.module.css"; // Your custom styles

<InputClickEdit
  className={styles.wrapper}
  inputClassName={styles.input}
  editButtonClassName={styles.editButton}
  saveButtonClassName={styles.saveButton}
  editWrapperClassName={styles.editingWrapper}
/>;

📄 License

MIT