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/).
|
||||
|
||||
This project was bootstrapped with [create-react-library](https://www.npmjs.com/package/create-react-library).
|
||||
|
||||
## 💾 Install
|
||||
|
||||
```sh
|
||||
@ -35,7 +33,7 @@ npm install --save react-component-form
|
||||
|
||||
```tsx
|
||||
import React from 'react'
|
||||
import Form, { HandleForm } from 'react-component-form'
|
||||
import { Form, HandleForm } from 'react-component-form'
|
||||
|
||||
const Example = () => {
|
||||
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.
|
||||
- `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
|
||||
|
||||
[MIT](./LICENSE)
|
||||
|
@ -1,6 +1,6 @@
|
||||
import * as React from 'react'
|
||||
import * as ReactDOM from 'react-dom'
|
||||
import Form, { HandleForm } from '../.'
|
||||
import { Form, HandleForm } from '../.'
|
||||
|
||||
import './index.css'
|
||||
import GitHubLogo from 'url:./github.jpg'
|
||||
|
@ -22,7 +22,7 @@ const getFormDataObject = (formElement: HTMLFormElement): FormDataObject => {
|
||||
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 formRef = useRef<HTMLFormElement>(null)
|
||||
|
||||
@ -52,5 +52,3 @@ const Form = (props: FormProps): JSX.Element => {
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
export default Form
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import { render, cleanup, fireEvent } from '@testing-library/react'
|
||||
|
||||
import Form, { HandleForm } from '../src'
|
||||
import { Form, HandleForm } from '../src'
|
||||
|
||||
afterEach(cleanup)
|
||||
|
||||
|
Reference in New Issue
Block a user