use-web3forms
v1.2.1
Published
Recieve form submissions directly to your inbox without any configuration. Powered by Web3forms. Integrates with react-hook-form and other form libs too!
Downloads
207
Maintainers
Readme
Web3forms react hook 📦
Recieve form submissions directly to your inbox without any configuration. Powered by Web3forms. Integrates with react-hook-form and other form too!
Features ✨
✅ Super lightweight
✅ Zero dependencies
✅ Full Typescript support
✅ Easy to use and a simple API
✅ Works with any form libraries
✅ Examples provided
✅ No configuration required (except for the API key)
✅ Works in Node.js (non-browser) environment too ✌️
Demo
https://use-web3forms.netlify.app/
☝️ useWeb3forms + React hook form. See the code here
Installation
npm i use-web3forms
And for yarn users👇
yarn add use-web3forms
Usage 📖
Javascript
const { submit } = useWeb3forms({
apikey: "YOUR_ACCESS_KEY_HERE",
onSuccess: (successMessage, data) => {
console.log(successMessage, data)
},
onError: (errorMessage, data) => {
console.log(errorMessage, data)
},
});
then just provide the data to be submitted to submit
function
<button
onClick={(e) => {
submit({
hello: "world",
isWorking: "Yesss!!!",
});
}}>
Submit form
</button>
Typescript
interface FormData {
hello: string;
isWorking: boolean | "Probably";
}
const { submit } = useWeb3forms<FormData>({
apikey: "YOUR_ACCESS_KEY_HERE",
onSuccess: (successMessage, data) => {
console.log(successMessage, data)
},
onError: (errorMessage, data) => {
console.log(errorMessage, data)
},
});
<button
onClick={(e) => {
submit({
hello: "world",
isWorking: "Yesss!!!",
});
}}>
Submit form
</button>
Make sure you provide a json with atleast one key-value pair to
submit
For other examples please look into the examples directory. If you cannot find your favourite library/framework, just open a issue or just make a tiny contribution 😉
FAQ ❓
Should I have a Web3forms account to use this library?
You should get your API key from Web3forms which requires your email.
How many form submissions can I make?
Web3forms has a generous free plan. You can view the latest pricing here
Run Locally
Clone the project
git clone https://github.com/Lalit2005/use-web3forms.git
Go to the project directory
cd use-web3forms
Install dependencies
yarn
Start the server
yarn dev
yarn dev
first builds the project so that the type definitions are emitted to dist
and then microbundle
starts watching for file changes.