Skip to content

React Contenenteditable component that is fully controlled, with the ability to navigate through nested HTML formatting elements with arrow keys.

License

Notifications You must be signed in to change notification settings

shadigaafar/react-controlled-contenteditable

Repository files navigation

بالعربي

React Controlled Contenteditable

Unlike other packages, this is a fully Controlled contenteditable. with ability to navigate through nested formatting elements with arrow keys. and Unlike react-contenteditable package, you can use useState or whatever with no issues.

Demo

Click here

Install

npm i react-controlled-contenteditable

Props

prop description type
html required: innerHTML of the editable element String
onChange required: called whenever innerHTML changes (e: ContentEditableEvent) => void
onKeyDown called whenever a key is pressed (e: KeyDownEvent) => void
...rest any other props you like, ref, style and etc... any

Note: KeyDownEvent type differs from React.KeyboardEvent in which the first comes with an extra property isComposing while the latter don't.

Example

import {useState} from 'react';
import ContentEditable, {ContentEditableEvent} from './contentEditable';

function App() {
	const [content, setContent] = useState('');
	const handleChange = (e: ContentEditableEvent) => {
		setContent(e.target.value);
	};
	return (
		<div className="App">
			<ContentEditable
				onChange={handleChange}
				html={content}
				tagName="div"
			/>
		</div>
	);
}

export default App;

Contribution

The doors are all open for contribution

About

React Contenenteditable component that is fully controlled, with the ability to navigate through nested HTML formatting elements with arrow keys.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published