inline-edit-react

Simple react inline title editor

Demo:

Features:

• Highlight editable area;
• Enabling editing mode by clicking;
• Saving changes by Enter;
• Success and error handlers;
• Choose of text alignment in the container.

Props list

Prop | Required | Type | Default | Note | --- | --- | --- | --- |--- align | No | string | 'center' | CSS justify-content property for .wrapper container: ['left', 'center', 'right'] initTitle | Yes | string | ' ' |
onEdit | Yes | function | | Will be called when Enter clicked onFail | No | function | () => {return true} | Handles an error: (error) => {alert(error)} onSuccess | No | function | () => {return true} | Handles an success: () => {alert('Success!')}

Browser Support:

• Firefox - 79+;
• Chrome - 84+;
• Safari - 13.1+;
• IE - 11 (Partial support);
• Edge - 84;

Installing as a package:

npm i inline-edit-react

Usage:

    import React, { Component } from 'react';
	import ReactDOM from 'react-dom';
	import InlineEdit from "inline-edit-react";

	const Title = ({title, asyncEditHandler}) => {

		onSuccess = () => {
			alert('ok');
		};

		onFail = (err) => {
			alert(`error: ${err}`);
		}

		onEdit = (newTitle) => {
		    asyncEditHandler(newTitle)
		}

		return (
			<InlineEdit 
				initTitle = {title}
				onEdit = {asyncEditHandler}
				onSuccess = {onSuccess}
				onFail = {onFail}
				align = 'left' // ['left', 'center', 'right']
			</InlineEdit>
		)
	}