feat: no longer export by default Form component

BREAKING CHANGE: you must use `import { Form } from 'react-component-form'`
This commit is contained in:
divlo 2021-06-17 19:24:21 +02:00
parent e3c4c53f23
commit 7ac46825ee
4 changed files with 11 additions and 8 deletions

View File

@ -23,8 +23,6 @@
Demo : [https://divlo.github.io/react-component-form/](https://divlo.github.io/react-component-form/). Demo : [https://divlo.github.io/react-component-form/](https://divlo.github.io/react-component-form/).
This project was bootstrapped with [create-react-library](https://www.npmjs.com/package/create-react-library).
## 💾 Install ## 💾 Install
```sh ```sh
@ -35,7 +33,7 @@ npm install --save react-component-form
```tsx ```tsx
import React from 'react' import React from 'react'
import Form, { HandleForm } from 'react-component-form' import { Form, HandleForm } from 'react-component-form'
const Example = () => { const Example = () => {
const handleSubmit: HandleForm = (formData, formElement) => { const handleSubmit: HandleForm = (formData, formElement) => {
@ -61,6 +59,13 @@ Instead to get the `event` param you get `formData` and `formElement` params :
- `formData`: It's an object where the keys are the name of your inputs and the current value. Behind the scene, it uses the [FormData](https://developer.mozilla.org/docs/Web/API/FormData) constructor. - `formData`: It's an object where the keys are the name of your inputs and the current value. Behind the scene, it uses the [FormData](https://developer.mozilla.org/docs/Web/API/FormData) constructor.
- `formElement`: It's the actual HTML form element in the DOM so for example you can access the `.reset()` method on a [HTMLFormElement](https://developer.mozilla.org/docs/Web/API/HTMLFormElement). - `formElement`: It's the actual HTML form element in the DOM so for example you can access the `.reset()` method on a [HTMLFormElement](https://developer.mozilla.org/docs/Web/API/HTMLFormElement).
## 💡 Contributing
Anyone can help to improve the project, submit a Feature Request, a bug report or
even correct a simple spelling mistake.
The steps to contribute can be found in [CONTRIBUTING.md](./CONTRIBUTING.md).
## 📄 License ## 📄 License
[MIT](./LICENSE) [MIT](./LICENSE)

View File

@ -1,6 +1,6 @@
import * as React from 'react' import * as React from 'react'
import * as ReactDOM from 'react-dom' import * as ReactDOM from 'react-dom'
import Form, { HandleForm } from '../.' import { Form, HandleForm } from '../.'
import './index.css' import './index.css'
import GitHubLogo from 'url:./github.jpg' import GitHubLogo from 'url:./github.jpg'

View File

@ -22,7 +22,7 @@ const getFormDataObject = (formElement: HTMLFormElement): FormDataObject => {
return Object.fromEntries<FormDataEntryValue>(new FormData(formElement)) return Object.fromEntries<FormDataEntryValue>(new FormData(formElement))
} }
const Form = (props: FormProps): JSX.Element => { export const Form = (props: FormProps): JSX.Element => {
const { onSubmit, onChange, children, ...rest } = props const { onSubmit, onChange, children, ...rest } = props
const formRef = useRef<HTMLFormElement>(null) const formRef = useRef<HTMLFormElement>(null)
@ -52,5 +52,3 @@ const Form = (props: FormProps): JSX.Element => {
</form> </form>
) )
} }
export default Form

View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import { render, cleanup, fireEvent } from '@testing-library/react' import { render, cleanup, fireEvent } from '@testing-library/react'
import Form, { HandleForm } from '../src' import { Form, HandleForm } from '../src'
afterEach(cleanup) afterEach(cleanup)