1
1
mirror of https://github.com/theoludwig/react-component-form.git synced 2024-07-17 07:30:13 +02:00
react-component-form/example/index.tsx

64 lines
1.6 KiB
TypeScript
Raw Normal View History

2021-06-17 18:48:19 +02:00
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Form, HandleForm } from '../.'
2020-08-04 16:22:31 +02:00
import './index.css'
2021-06-17 18:48:19 +02:00
import GitHubLogo from 'url:./github.jpg'
2020-08-04 16:22:31 +02:00
const App = () => {
const handleSubmit: HandleForm = (formData, formElement) => {
console.clear()
console.log('onSubmit: ', formData)
formElement.reset()
}
const handleChange: HandleForm = (formData) => {
console.log('onChange: ', formData)
}
return (
<div className='container'>
<h2>{'<Form />'}</h2>
2021-06-17 18:48:19 +02:00
<h5 className='title-install'>npm install --save react-component-form</h5>
2020-08-04 16:22:31 +02:00
<Form onSubmit={handleSubmit} onChange={handleChange}>
<div className='form-group'>
<label htmlFor='name'>Name :</label>
<input
className='form-control'
type='text'
name='name'
id='name'
placeholder='name'
/>
</div>
<button type='submit' className='btn btn-primary'>
Submit
</button>
</Form>
<div className='result-container'>
<h4>
Try the form and Inspect the console{' '}
<span role='img' aria-label='smiley'>
😃
</span>
</h4>
</div>
<div className='github-logo'>
<a
target='_blank'
rel='noopener noreferrer'
href='https://github.com/Divlo/react-component-form'
>
2021-06-17 18:48:19 +02:00
<img width='30px' alt='github' src={GitHubLogo} />
2020-08-04 16:22:31 +02:00
</a>
</div>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))