react-inline-editable

A zero-dependency and unstyled React component library for inline editing with flexible composition patterns and sensible defaults.

Features

• 🎯 Zero Dependencies - Pure React implementation
• ➰ Flexible Composition - Uses compound components pattern
• 🔄 Controlled & Uncontrolled - Support for both patterns
• 📝 TypeScript - Full type safety with polymorphic props
• 🎛️ Customizable - Configurable activation and deactivation modes

Installation

npm install @progressive-villager/react-inline-editable
# or
pnpm add @progressive-villager/react-inline-editable
# or
yarn add @progressive-villager/react-inline-editable

Quick Start

import { InlineEditable } from "@progressive-villager/react-inline-editable";

function App() {
  const [value, setValue] = useState("Click to edit");

  return (
    <InlineEditable>
      <InlineEditable.Preview>{value}</InlineEditable.Preview>
      <InlineEditable.Write
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </InlineEditable>
  );
}

Documentation

For complete documentation, examples, and API reference, visit the documentation site.

License

MIT