# picr-react-content-editable

> React implementation of content editable element

Latest version **1.0.1** (published 2018-03-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install picr-react-content-editable
pnpm add picr-react-content-editable
yarn add picr-react-content-editable
bun add picr-react-content-editable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-03-15 |
| First published | 2018-03-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 11.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ivan Kalinin at Picr Inc. |
| Maintainers | ivankalinin |
| Keywords | react, component, content editable, editable, input, textarea, autosize |

## Links

- npm: https://www.npmjs.com/package/picr-react-content-editable
- Repository: https://github.com/finicprint/picr-react-content-editable
- Homepage: https://github.com/finicprint/picr-react-content-editable#readme
- Issues: https://github.com/finicprint/picr-react-content-editable/issues
- npm.io page: https://npm.io/package/picr-react-content-editable

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2018-03-15
- 1.0.0 — 2018-03-15

## README

# 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](https://codesandbox.io/s/kk84o6r9pr)

```javascript

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`

---
_Source: https://npm.io/package/picr-react-content-editable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._