simply-react-forms
Add Serverless forms to your React Application
Install
This library needs the tailwindcss stylesheet and react toastity to work
npm install --save simply-react-forms tailwindcss react-toastifyUsage
- You'll need to register to Simply Forms.
- Verify your email to create a project.
- Inside the project you want, create a form. Here is we're you define the validations which is going to be required at client an server before the response of the form creates.
- Download your config file which is required by Form Component.
-
🎉 Enjoy!
import { Form } from 'simply-react-forms'
import 'tailwindcss/dist/tailwind.min.css';
import 'react-toastify/dist/ReactToastify.css'
import { ToastContainer } from 'react-toastify'
import formConfig from './contact-form-config.json'
export default function App() {
return (
<>
<Form {...formConfig} />
<ToastContainer />
</>
)
}Components
By now there's only one single Component which is a basic implementation for Simply Forms, if you wan't to contribute this project, feel free to do it, I'll appreciate it so much.
Form
This allow you to create a whole form (including validations) only passing a basic form config file (or passing all props required) and personalizing it.
import { Form } from 'simply-react-forms'
import 'tailwindcss/dist/tailwind.min.css';
import 'react-toastify/dist/ReactToastify.css'
import { ToastContainer } from 'react-toastify'
import formConfig from './contact-form-config.json'
export default function App() {
return (
<>
<Form
{...formConfig}
title="Contact Us"
message="Tell Us how We can help You"
labels={{
name: 'Name',
message: 'Message'
}}
placeholders={{
name: 'Elon Musk',
message: 'Your problem here...'
}}
onCompleted={data => console.log(data)}
onError={error => console.error(error)}
button={{
label: 'Send'
}}
/>
<ToastContainer />
</>
)
}Properties
| Name | Type | Description |
|---|---|---|
| projectID | String | ID from the project, you can find this in your project config at Simply Forms |
| formID | String | ID from the form, same as projectID, you can find it in your form config at Simply Forms |
| title | String | Display a simple title for your form |
| message | String | Be descriptive about what is the goal of respond to your form. Default: undefined |
| fields | Array | This is an array of objects with the configuration of every input which is going to be rendered on the form |
| labels | Object | Here you can set the input labels, by example: if You have a name field, the you have to pass a key name with the label as value. Default: {} |
| placeholders | Object | Same as labels. Default: {} |
| onCompleted | Func | This function will be called if the response is created successfully. Default: () => {} |
| onError | Func | And this function will be called if there's an error on response creation. Default: () => {} |
| errors | Object | By now, you can only set a general error for a field, so this works same as labels or placeholders. Default: {} |
| colors | Object | Here you can set the color of the title, message and label. Default: undefined |
| input | Object | Here you cant personalize the Input component like the background, color, border. Default: {} |
License
MIT © Simply-Development
