react-editable-elements

field

Components and hooks to build a WYSIWYG editor. In edition mode (through editorContext), each element can be edited.

Install

npm install --save react-editable-elements

Usage

import * as React from 'react'

import { field, useEditableText, editorContext, withEditorContext } from 'react-editable-elements'

const Example = () => {

	const { toggleEditionMode } = useContext(editorContext)
	const exampleText = useEditableText(initValue, handleUpdate)

	function handleUpdate(data){
		// Here you can update your database (or anything you want)
	}

	return (
		<div>
			<button onClick={toggleEditionMode}>Toggle edition mode</button>
			<field.p {...exampleText}>
		</div>
	)
}

export default withEditorContext(Example)

Docs

Note : react-editable-elements is currently under development

available elements :

field.h1
field.h2
field.h3
field.h4
field.h5
field.h6
field.p
field.img

incoming elements :

field.table

hX have to be used with useInlineText(defaultValue, updateCallback)

p has to be used with useEditableText(defaultValue, updateCallback)

img have to be used with useDroppableImage(defaultValue, updateCallback)

Editable Background Image

const Component = () => {

	const background = useDroppableBackground(defaultImage, handleUpdate)

	function handleUpdate(data){
		// Here you can update your database (or anything you want)
	}

	return (
		<div style={{
			...background.style
			}}
			{...background.handlers}
		>
			Hello world
		</div>
	)
}

Then, in edit mode, just drop your image. She'll be displayed and the handleUpdate callback will be called with the image (File object) in argument.

License

MIT © anthonyjeamme