Antd Inline Edit

Is it an input? Is it a div? It's both! 🤩

An inline edit displays a custom input component that switches between reading and editing on the same page.

The Antd Inline Edit component is a React component that provides an inline editing interface.

Installation

You can install the Antd Inline Edit component using npm:

npm install antd-inline-edit

or yarn:

yarn add antd-inline-edit

Usage

To use the Antd Inline Edit component in your project, you can import it like any other React component:

import React, { useState } from 'react';
import { Button } from 'antd';
import { InlineEdit } from 'antd-inline-edit';

export default function MyComponent() {
  const valueWhenUndo = 'John Doe'
  const [name, setName] = useState(valueWhenUndo);

  const handleSave = (value) => {
    setName(value);
  };

  return (
    <div>
      <h1>Profile</h1>
      <InlineEdit 
        onSave={handleSave}
        initialValue={name}
        defaultValue={valueWhenUndo}
        maxLength={50}
      />
    </div>
  );
}

In this example, we're rendering an InlineEdit component and passing in a value prop and an onSave prop. When the user clicks on the component, it will switch to edit mode and allow the user to edit the value. When the user saves the changes, the onSave callback will be called with the new value.

Props

The Antd Inline Edit component accepts the following props:

Name	Description	Type	Default	Example
onSave	Callback function that is called after the user has finished editing the input (either by pressing Enter or by blurring the input).	Function	() => {}	value => console.log(value)
displayRenderer	Custom render function that is used to display the current value of the component.	Function	undefined	value => <span>{value}</span>
initialValue	The initial value that is displayed in the component when it is first rendered.	String	undefined	"Hello, world!"
defaultValue	The default value that is used if the user clicks the "Undo" button.	String	undefined	"John Doe"
maxLength	The maximum number of characters that can be entered into the input field.	Number	155	50
startWithEditViewOpen	whether to start with editable component open	Boolean	false	true
inputComponent	The editable component rendered (input or textarea).	String	input	textarea
textAreaProps	The props passed to the antd textarea component. Only valid when inputComponent is textarea	Object	{}	{ autoSize: { minRows: 2, maxRows: 6 }}

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

If you'd like to contribute to the Antd Inline Edit component, please open an issue or pull request on the GitHub repository. We welcome all contributions and feedback!

Author

This package was created by erictehyc.