Skip to content

Commit 9f5fe91

Browse files
committed
chore: fallback to copying README, so NPM picks it up
1 parent 519bd56 commit 9f5fe91

File tree

3 files changed

+103
-13
lines changed

3 files changed

+103
-13
lines changed

README.md

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<center>
2+
3+
<h1 style="display:none;">react-netlify-forms</h1>
4+
5+
> React components and hooks giving you the power of Netlify Forms. Start building serverless forms on Netlify with React. Honeypot fields and reCAPTCHA are included as ready-to-use components.
6+
7+
[![NPM](https://img.shields.io/npm/v/react-netlify-forms.svg)](https://www.npmjs.com/package/react-netlify-forms) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
8+
9+
<div style="display:none;" aria-hidden>
10+
11+
[Go to documentation with live demo.](https://pyrax.github.io/react-netlify-forms)
12+
13+
</div>
14+
15+
</center>
16+
17+
## Features
18+
19+
It gives you all the features of Netlify Forms as simple and **reusable** React components which have been tested on Netlify.
20+
21+
- Default form handlers with support for file uploads.
22+
- Spam prevention through included honeypot and reCAPTCHA components.
23+
- Can be used alone or together with form libraries such as Formik or react-hook-form.
24+
25+
<Alert variant='muted'>
26+
27+
## Before using
28+
29+
This component must be used with Server-Side Rendering (SSR) because Netlify
30+
searches for a `data-netlify` attribute on HTML `form` tags to setup their
31+
Forms backend for you.
32+
33+
➡️ _Suggestions for SSR: GatsbyJS, Next.js, react-static_
34+
35+
</Alert>
36+
37+
## Install
38+
39+
Either install with NPM via:
40+
41+
```bash
42+
npm install --save react-netlify-forms
43+
```
44+
45+
or with YARN via:
46+
47+
```bash
48+
yarn add react-netlify-forms
49+
```
50+
51+
## Usage
52+
53+
In the following example a contact form with two inputs and a honeypot for extra spam prevention is shown. It also works without JavaScript by falling back to a serverside-rendered form which just submits data with an usual POST request:
54+
55+
```jsx
56+
import React, { Component } from 'react'
57+
58+
import { NetlifyForm, Honeypot } from 'react-netlify-forms'
59+
60+
export default ContactForm = () => (
61+
<NetlifyForm name='Contact' action='/thanks' honeypotName='bot-field'>
62+
{({ handleChange, success, error }) => (
63+
<>
64+
<Honeypot />
65+
{success && <p>Thanks for contacting us!</p>}
66+
{error && (
67+
<p>Sorry, we could not reach our servers. Please try again later.</p>
68+
)}
69+
<div>
70+
<label htmlFor='name'>Name:</label>
71+
<input type='text' name='name' id='name' onChange={handleChange} />
72+
</div>
73+
<div>
74+
<label htmlFor='message'>Message:</label>
75+
<textarea
76+
type='text'
77+
name='message'
78+
id='message'
79+
rows='4'
80+
onChange={handleChange}
81+
/>
82+
</div>
83+
<div>
84+
<button type='submit'>Submit</button>
85+
</div>
86+
</>
87+
)}
88+
</NetlifyForm>
89+
)
90+
```
91+
92+
For more examples please browse through our website.
93+
94+
## License
95+
96+
MIT © [Björn Clees](https://github.com/Pyrax)
97+
98+
---
99+
100+
Thanks to [create-react-library](https://www.npmjs.com/package/create-react-library) for providing quick setup for NPM packages.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"test": "run-s test:lint test:build",
3131
"test:build": "run-s build",
3232
"test:lint": "eslint .",
33-
"prepare-deploy": "cd www && yarn install && yarn clean && cp ../LICENSE.md LICENSE.md",
33+
"prepare-deploy": "cd www && yarn install && yarn clean && cp ../README.md README.md && cp ../LICENSE.md LICENSE.md",
3434
"predeploy:default": "yarn prepare-deploy && cd www && yarn build",
3535
"predeploy:prefix": "yarn prepare-deploy && cd www && yarn build:prefix",
3636
"deploy": "yarn build && yarn deploy:gh",

www/README.md

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
<center>
22

3-
<h1 style="display:none;">react-netlify-forms</h1>
3+
<h1 style="display:none;">react-netlify-forms docs</h1>
44

5-
> React components and hooks giving you the power of Netlify Forms. Start building serverless forms on Netlify with React. Honeypot fields and reCAPTCHA are included as ready-to-use components.
6-
7-
[![NPM](https://img.shields.io/npm/v/react-netlify-forms.svg)](https://www.npmjs.com/package/react-netlify-forms) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
5+
**This README is a placeholder. It will be replaced by the README in the main directory on build. Please only edit the original README in the root.**
86

97
<div style="display:none;" aria-hidden>
108

@@ -14,14 +12,6 @@
1412

1513
</center>
1614

17-
## Features
18-
19-
It gives you all the features of Netlify Forms as simple and **reusable** React components which have been tested on Netlify.
20-
21-
- Default form handlers with support for file uploads.
22-
- Spam prevention through included honeypot and reCAPTCHA components.
23-
- Can be used alone or together with form libraries such as Formik or react-hook-form.
24-
2515
<Alert variant='muted'>
2616

2717
## Before using

0 commit comments

Comments
 (0)