/react-text-to-input

React component that switches between a "text view" and an "input view" after a click.

Primary LanguageTypeScript

react-text-to-input

npm version

React component that switches between a "text view" and an "input view" after a click.

Check the DEMO

How to use

Install

Run yarn add react-text-to-input or npm install react-text-to-input

Use

import TextToInput from "react-text-to-input";

<TextToInput
    value={this.state.value}
    onChange={this.onChange}
/>

By default, the div element in "the view mode" has minHeight set to 20px to prevent the element turning not clickable when value is empty.

Properties

Property Type Required
value string yes
onChange (value: string) => void yes
textClassName string no
inputClassName string no
textStyle React.CSSProperties no
inputStyle React.CSSProperties no
inputProps React.HTMLProps no

Running example

cd example/
yarn start