React Editable Textfield

A simple React component for a editable textfield with event handlers for updates to the text. This is inspired by the Atlassian inline-editable-textfield used in Jira and other Atlassian products.

Features

• Confirmation and cancellation buttons
• Auto update on blur

Coming Soon

• Nothing new in the works

Suggestions & Feature Requests

If you have any suggestions for improvements for feature requests, open an issue on the github page

Demo

Here is a simple demo.

Installation

The package can be installed via npm

npm install @jchristou/react-editable-textfield

Peer Dependencies

Install the following peer dependencies with given versions

"react": "^16.10.2",
"react-dom": "^16.10.2"

Usage

See the example project. This uses the npm published version of the component.

Default Styling

To include the default styling you will need to import it

import '@jchristou/react-editable-textfield/dist-component/style.css';

Development

Run npm install to install all packages and depenedencies.

Dev

To run dev server with HMR while developing use npm run start. This will run the project on http://localhost:8080 by default.

There is a TestPage.js component located in the test folder (see TestPage.js) which you can use for testing.

Production

npm run build

Analysis

npm run build:analyze builds static analysis to examine bundle sizing. You can see output reports in dist/stats.html and dist/report.html then use http-server to run a http server and access the stats.html. Just run http-server dist (ensure you have http-server installed globally) the dist parameter ensures that it uses the dist folder. It will give you an IP address e.g. http://172.17.126.81:8080 then you can access stats.html using http://172.17.126.81:8080/stats.html.