Picr react content editable

A simple implementation of content editable that autosizes input/textarea with minimum Javascript.

Installation

npm install picr-react-content-editable

The idea

The idea is pretty simple. Input field/textarea renders as absolute positioned element in a wrapper with height and width set to 100%. Input/Textarea value renders in the wrapper with transparent color that makes the text invisible and stretches the wrapper. Since the field has the same font style with the exception of the color, it has the same dynamic dimensions.

How to use

Demo on Codesandbox

import React, { Component } from 'react';
import ContentEditable from 'picr-react-content-editable';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ''
    };
  }

  onInputChange = (e) => {
    this.setState({ value: e.target.value });
  }

  render() {
    return (
      <ContentEditable
        onChange={this.onInputChange}
        value={this.state.value}
      />
    );
  }
}

export default App;

Props

| Prop | Description | Type | Default | |:--------------|:-----------------------------|:-------|:--------| |className | component wrapper class name | string | '' | |fieldClassName | input/textarea class name | string | '' | |customElement | custom element that renders instead of default input/textarea | React component, DOM | null |type | type of field element | string ('input|textarea') | 'input' |onChange | input/textarea onchange callback | function | Required | value | input/textarea value | string | Required