Abstract
Hello everyone it’s me candle. In this article we will use simple-format in react. Simple format is famous for Ruby on Rails and is commonly used. React has a legacy react-simple-format and 16g’s made. The legacy lib is not useful, so I choose 16g’s made.
https://github.com/16g/react-simple-format
Condition
Nothing
Create project
If you already have a React project please use it.
If not, use the following command to create it.
create-react-app simple_format_sample cd simple_format_sample
How to use react-simple-format
First install it.
yarn add @16g/react-simple-format
Open a appropriate component file. I write it in src/App.js
.
import React, { Component } from 'react' import SimpleFormat from '@16g/react-simple-format' class App extends Component { constructor(props) { super(props) this.state = { content: '', } this.handleFormInputChanged = this.handleFormInputChanged.bind(this) } handleFormInputChanged(event) { this.setState({ [event.target.name]: event.target.value, }) } render() { return ( <div style={{ textAlign: 'center' }}> <div>Simple Format Sample</div> <textarea name="content" value={this.state.content} onChange={this.handleFormInputChanged} style={{ width: '400px', height: '300px', }} /> <div style={{ marginTop: '100px' }}> <SimpleFormat text={this.state.content} /> </div> </div> ) } } export default App
The writing about “simple format” is these two parts.
Import it here.
import SimpleFormat from '@16g/react-simple-format'
The value input with textarea is displayed via simple format.
<SimpleFormat text={this.state.content} />
It is convenient.
Conclusion
Let’s use simple format.