react-input-multiline v0.3.1

React-Input-Multiline

A text input for React, based on contenteditable div. It has inline display property, can span accross multiple lines and is dependant on the parent container dimensions.

Installation and usage

install using package managers.

# With npm
npm i react-input-multiline

# With Yarn

yarn add react-input-multiline

And use it in your app:

With React Class Component

import React from 'react';
import { MultilineInput } from 'react-input-multiline';

class App extends React.Component {
  state = {
    inputValue: '',
  };
  handleChange = (e) => {
    this.setState({ value: e.target.value }, () =>
      console.log(`Typing:`, this.state.inputValue)
    );
  };
  render() {
    const { inputValue } = this.state;

    return (
      <div className="App">
        <MultilineInput
          value={inputValue}
          id="someId"
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

With React Hooks

import React, { useState } from 'react';
import { MultilineInput } from 'react-input-multiline';

export default function App() {
  const [inputValue, setInputValue] = useState('');

  return (
    <div className="App">
      <MultilineInput
        value={inputValue}
        id="someId"
        onChange={(e) => setInputValue(e.target.value)}
      />
    </div>
  );
}

Props

The available props aren:

License

MIT Licensed. Copyright (c) Giedrius Rudzianskas 2021.