Skip to content

Commit e8d4c3d

Browse files
PyraxPyrax
committed
chore(docs): update index
1 parent 8d031bc commit e8d4c3d

File tree

5 files changed

+103
-154
lines changed

5 files changed

+103
-154
lines changed

‎README.md‎

Lines changed: 3 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
<center>
2-
3-
<Hide>
4-
5-
<h1>react-netlify-forms</h1>
6-
7-
</Hide>
1+
# react-netlify-forms
82

93
> 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.
104
@@ -13,18 +7,8 @@
137
[![JavaScript Style Guide](https://flat.badgen.net/badge/code%20style/standard/f2a)](https://standardjs.com)
148
[![License](https://flat.badgen.net/github/license/Pyrax/react-netlify-forms)](https://github.com/Pyrax/react-netlify-forms/blob/master/LICENSE.md)
159

16-
<Hide>
17-
18-
<div>
19-
2010
[Go to documentation with live demo.](https://pyrax.github.io/react-netlify-forms)
2111

22-
</div>
23-
24-
</Hide>
25-
26-
</center>
27-
2812
## Features
2913

3014
It gives you all the features of Netlify Forms as simple and **reusable** React components which have been tested on Netlify.
@@ -33,32 +17,20 @@ It gives you all the features of Netlify Forms as simple and **reusable** React
3317
- Spam prevention through included honeypot and reCAPTCHA components.
3418
- Can be used alone or together with form libraries such as Formik or react-hook-form.
3519

36-
<Alert variant='muted'>
37-
3820
## Before using
3921

4022
This component must be used with Server-Side Rendering (SSR) because Netlify
4123
searches for a `data-netlify` attribute on HTML `form` tags to setup their
4224
Forms backend for you.
4325

44-
➡️ _Suggestions for SSR: GatsbyJS, Next.js, react-static_
45-
46-
</Alert>
26+
_Suggestions: Astro, Next.js, Remix or Vite_
4727

4828
## Install
4929

50-
Either install with NPM via:
51-
5230
```bash
5331
npm install --save react-netlify-forms
5432
```
5533

56-
or with YARN via:
57-
58-
```bash
59-
yarn add react-netlify-forms
60-
```
61-
6234
## Usage
6335

6436
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:
@@ -107,6 +79,6 @@ For more examples please browse through our website.
10779

10880
MIT © [Björn Clees](https://github.com/Pyrax)
10981

110-
---
82+
## Acknowledgements
11183

11284
Thanks to [create-react-library](https://www.npmjs.com/package/create-react-library) for providing quick setup for NPM packages.

‎www/README.md‎

Lines changed: 0 additions & 112 deletions
This file was deleted.

‎www/astro.config.mjs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default defineConfig({
99
integrations: [
1010
starlight({
1111
plugins: [starlightThemeRapide()],
12-
title: 'React Netlify Forms',
12+
title: 'react-netlify-forms',
1313
description: 'React components and hooks giving you the power of Netlify Forms',
1414
logo: {
1515
src: './src/assets/logo.png',
@@ -28,6 +28,7 @@ export default defineConfig({
2828
autogenerate: { directory: 'examples' },
2929
},
3030
{ slug: 'reference' },
31+
{ slug: 'license' },
3132
],
3233
}),
3334
mdx(),

‎www/bun.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"astro": "^5.6.1",
1212
"react": "^19.1.0",
1313
"react-dom": "^19.1.0",
14-
"react-netlify-forms": "link:../",
14+
"react-netlify-forms": "link:react-netlify-forms",
1515
"sharp": "^0.32.5",
1616
"starlight-theme-rapide": "^0.5.1",
1717
},
@@ -764,7 +764,7 @@
764764

765765
"react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],
766766

767-
"react-netlify-forms": ["react-netlify-forms@link:../", {}],
767+
"react-netlify-forms": ["react-netlify-forms@link:react-netlify-forms", {}],
768768

769769
"readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
770770

‎www/src/content/docs/index.mdx‎

Lines changed: 96 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,104 @@
11
---
2-
title: Welcome to React Netlify Forms
2+
title: react-netlify-forms
33
description: Get started with react-netlify-forms
44
---
55

6-
import Readme from '../../../README.md'
6+
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'
77

88
<center>
9-
<img
10-
src='favicon.png'
11-
alt='react-netlify-forms Logo'
12-
style={{ padding: '1rem 0.5rem 0rem 0.5rem', maxHeight: '120px' }}
13-
/>
9+
10+
<img src="favicon.png" alt="react-netlify-forms" style={{ maxHeight: '120px' }} />
11+
12+
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.
13+
14+
[![NPM](https://flat.badgen.net/npm/v/react-netlify-forms)](https://www.npmjs.com/package/react-netlify-forms)
15+
[![minzipped package size](https://flat.badgen.net/bundlephobia/minzip/react-netlify-forms)](https://www.npmjs.com/package/react-netlify-forms)
16+
[![JavaScript Style Guide](https://flat.badgen.net/badge/code%20style/standard/f2a)](https://standardjs.com)
17+
[![License](https://flat.badgen.net/github/license/Pyrax/react-netlify-forms)](https://github.com/Pyrax/react-netlify-forms/blob/master/LICENSE.md)
18+
1419
</center>
1520

16-
<Readme />
21+
## Features
22+
23+
It gives you all the features of Netlify Forms as simple and **reusable** React components which have been tested on Netlify.
24+
25+
- Default form handlers with support for file uploads.
26+
- Spam prevention through included honeypot and reCAPTCHA components.
27+
- Can be used alone or together with form libraries such as Formik or react-hook-form.
28+
29+
<Aside type="caution" title="Before using">
30+
31+
This component must be used with Server-Side Rendering (SSR) because Netlify
32+
searches for a `data-netlify` attribute on HTML `form` tags to setup their
33+
Forms backend for you.
34+
35+
_Suggestions: Astro, Next.js, Remix or Vite_
36+
37+
</Aside>
38+
39+
## Install
40+
41+
<Tabs>
42+
<TabItem label="npm" icon="seti:npm">
43+
```sh
44+
npm install react-netlify-forms
45+
```
46+
</TabItem>
47+
<TabItem label="pnpm" icon="pnpm">
48+
```sh
49+
pnpm add react-netlify-forms
50+
```
51+
</TabItem>
52+
<TabItem label="Yarn" icon="seti:yarn">
53+
```sh
54+
yarn add react-netlify-forms
55+
```
56+
</TabItem>
57+
<TabItem label="bun" icon="bun">
58+
```sh
59+
bun add react-netlify-forms
60+
```
61+
</TabItem>
62+
</Tabs>
63+
64+
## Usage
65+
66+
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:
67+
68+
```jsx
69+
import React from 'react'
70+
import { NetlifyForm, Honeypot } from 'react-netlify-forms'
71+
72+
const ContactForm = () => (
73+
<NetlifyForm name='Contact' action='/thanks' honeypotName='bot-field'>
74+
{({ handleChange, success, error }) => (
75+
<>
76+
<Honeypot />
77+
{success && <p>Thanks for contacting us!</p>}
78+
{error && (
79+
<p>Sorry, we could not reach our servers. Please try again later.</p>
80+
)}
81+
<div>
82+
<label htmlFor='name'>Name:</label>
83+
<input type='text' name='name' id='name' onChange={handleChange} />
84+
</div>
85+
<div>
86+
<label htmlFor='message'>Message:</label>
87+
<textarea
88+
type='text'
89+
name='message'
90+
id='message'
91+
rows='4'
92+
onChange={handleChange}
93+
/>
94+
</div>
95+
<div>
96+
<button type='submit'>Submit</button>
97+
</div>
98+
</>
99+
)}
100+
</NetlifyForm>
101+
)
102+
103+
export default ContactForm
104+
```

0 commit comments

Comments
 (0)