iamwill123 / react-inline-input-edit

An inline, customizable and editable text component built in React.

A simple React inline editing component

Reasoning

This npm package is originally adapted from https://github.com/bfischer/react-inline-editing. I found the package a few days ago and is super useful but un-maintained? Mainly needed it to work with TypeScript + ReactJS. The below README desc is adapted from the originator's README.

This is an inline, editable text/label component built in React + TypeScript.

The <InlineInputEdit /> allows the user to simply click and edit text inline. It consists of a <label> element to display the unedited text and an <input /> element to allow editing.

Installation

• npm install --save react-inline-input-edit
• yarn add react-inline-input-edit

Create your own

• to build -> npm run build or yarn build
• to test -> npm run test or yarn test

Component props

(*) Required

Prop	Type	Description
text (*)	string	Text to be displayed on both the label and initially in the editor
isEditing	boolean	Flags whether the label should be in editor mode
emptyEdit	boolean	Flags whether the label should be in editor mode when text is empty('' or undefined)
labelPlaceHolder	string	Label value to display when text is not present
labelClassName	string	Class name for the text styling
labelFontSize	string	Font size for the text
labelFontWeight	string	Font weight for the text
inputMaxLength	number	Max length for the input in editing mode
inputPlaceHolder	string	Placeholder for the input in editing mode
inputWidth	string	Width of the input in editing mode
inputHeight	string	Height of the input in editing mode
inputFontSize	string	Font size for the input in editing mode
inputFontWeight	string	Font weight for the input in editing mode
inputClassName	string	Class name for the input editor's styling
inputBorderWidth	string	Border width for the input in editing mode
onFocus	function	Callback for text focusing. Parameter(s): text
onFocusOut	function	Callback for focus leaving editor. Parameter(s): text

An example

import React, { FC } from 'react';
import { InlineInputEdit } from 'react-inline-input-edit';

interface Props {}

export const SomeAwesomeComponent: FC<Props> = () => {

  const _handleFocus = (text: any) => {
    console.log('Focused with text: ' + text);
  };

  const _handleFocusOut = (text: any) => {
    console.log('Left editor with text: ' + text);
  };

  return (
    <>
      <InlineInputEdit
          text={`Chuck Norris’ tears cure cancer. Too bad he has never cried.`}
          inputWidth="200px"
          inputHeight="25px"
          inputMaxLength={50}
          labelFontWeight="bold"
          inputFontWeight="bold"
          onFocus={_handleFocus}
          onFocusOut={_handleFocusOut}
      />
    </>
  )
};