feat: no longer export by default Form component
BREAKING CHANGE: you must use `import { Form } from 'react-component-form'`
This commit is contained in:
parent
e3c4c53f23
commit
7ac46825ee
11
README.md
11
README.md
@ -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)
|
||||||
|
@ -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'
|
||||||
|
@ -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
|
|
||||||
|
@ -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)
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user