react-content-editable

react-content-editable is a simple, flexible contentEditable textbox built using React.js.

It is extremely simple to use and get started with.

What does it do?

react-content-editable provides a HTML element with editable text. Included is HTML sanitization with the ability to customize to suit your requirements. The editable text will be automatically formatted using paragraph and single line break tags.

Table of Contents

• Installation
• API documentation
• Advanced
• Examples

Installation

To install, you can use npm or yarn:

$ npm install @robertfyffe/react-editable-textbox
$ yarn add @robertfyffe/react-editable-textbox

API documentation

<EditableTextBox
  theme={
    {
      editor: {
        background: '#f8d7da',
        borderRadius: '5px',
        fontSize: '16px',
        margin: '0 0 15px',
        padding: '6px 0 6px 10px',
        textSpacing: '0 0 15px',
        height: '33px'
      },
      placeholder: {
        color: '#721c24',
        fontSize: '16px',
        padding: '6px 0 6px 10px'
      },
      entry: {
        border: '1px solid #f5c6cb',
        focusBorderColor: '#5C656F',
        borderRadius: '5px',
        color: '#721c24',
        fontSize: '16px',
        lineHeight: '21px',
        padding: '6px 0 6px 10px',
        textSpacing: '0 0 15px',
        height: '33px',
        zIndex: 10
      }
    }
    /* Object indicating theme override styles to be used.
      It has three keys, `editor`, `placeholder` and `entry`.
      The properties are fixed using this method of styling.
      If more precise styling is required use the styles prop. */
  }
  styles={
    {
      placeholder: {
        fontStyle: 'italic'
      },
      entry: {
        borderWidth: '4px',
        outline: 0
      }
    }
    /* Object indicating custom styles to be used.
      It has three keys, `editor`, `placeholder` and `entry`.
      All CSS properties can be passed. */
  }
  aria={
    {
      'aria-placeholder': 'Content Editable Textbox',
      'aria-labelledby': 'contentEditableLabel'
    }
    /* Aria attributes (optional). */
  }
  role={
    'textbox'
    /* String indicating the role of the textbox.
      This attribute is `textbox` by default. */
  }
  defaultText={
    'Default text...'
    /* String to set as the default text of the textbox. */
  }
  placeholder={
    'Placeholder text...'
    /* String to set as the placeholder text of the textbox. */
  }
  disabled={
    false
    /* Boolean describing if the textbox should be disabled. */
  }
  isGhost={
    false
    /* Boolean describing if the textbox should be loading with the ghost theme.
    This attribute is false by default. */
  }
  allowedTags={
    ['p']
    /* Array of allowed HTML tags for editor.
      This attribute is `['p']` by default. */
  }
  allowedAttributes={
    []
    /* Array of allowed HTML attributes for editor.
      All attributes disabled` by default. */
  }
  onFocus={
    resp => console.log('onFocus!', resp)
    /* Function that will be run when the editor gains focus. 
      An object will be returned with the following structure:
      { 
        charCount: 0,
        text: 'Resp text'
      }
    */
  }
  onBlur={
    resp => console.log('onBlur!', resp)
    /* Function that will be run when the editor looses focus.
      An object will be returned with the following structure:
      { 
        charCount: 0,
        text: 'Resp text'
      }
    */
  }
  onInput={
    resp => console.log('onInput!', resp)
    /* Function that will be run when text is inputted.
      An object will be returned with the following structure:
      { 
        charCount: 0,
        text: 'Resp text'
      }
    */
  }
/>

Advanced

The component is configured to handle the children prop. This is useful in scenarios where you want full control over the content of the textbox from the consuming component.

<EditableTextBox>{this.state.html}</EditableTextBox>

Examples

Here is a simple example of react-editable-textbox being used in an app:

import React from 'react';
import ReactDOM from 'react-dom';
import { EditableTextBox } from '@robertfyffe/react-content-editable';

const App = () => <EditableTextBox />;

const appElement = document.getElementById('example');
ReactDOM.render(<App />, appElement);

You can find more examples in the examples directory, which you can run in a local development server using npm run start or yarn run start.