chore(examples): add checkboxes example

examples/checkboxs/index.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { render } from "react-dom";
+import { useForm } from "react-cool-form";
+
+import "./styles.scss";
+
+const Field = ({ label, id, ...rest }) => (
+ <div>
+ <label htmlFor={id}>{label}</label>
+ <input id={id} {...rest} />
+ </div>
+);
+
+function App() {
+ const { form, reset } = useForm({
+ onSubmit: (values) => alert(JSON.stringify(values, undefined, 2))
+ });
+
+ React.useEffect(() => {
+ reset({ firstName: "Welly", lastName: "Shen" });
+ }, [reset]);
+
+ return (
+ <form ref={form} noValidate>
+ <Field label="First Name" id="first-name" name="firstName" />
+ <Field label="Last Name" id="last-name" name="lastName" />
+ <input type="submit" />
+ </form>
+ );
+}
+
+render(<App />, document.getElementById("root"));

examples/checkboxs/package.json

@@ -0,0 +1,18 @@
+{
+ "name": "rcf-checkboxes",
+ "version": "0.0.0",
+ "description": "The checkboxes example of RCF.",
+ "main": "index.js",
+ "dependencies": {
+ "react": "^17.0.1",
+ "react-cool-form": "latest",
+ "react-dom": "^17.0.1",
+ "react-scripts": "^4.0.1"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "eject": "react-scripts eject"
+ },
+ "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
+}

examples/checkboxs/styles.scss

@@ -0,0 +1,36 @@
+body {
+ font-family: sans-serif;
+ background: #222;
+}
+
+form {
+ margin: 5rem auto 0;
+ width: 24rem;
+
+ div {
+ width: inherit;
+ margin-bottom: 1rem;
+ }
+
+ label {
+ display: block;
+ color: #fff;
+ }
+
+ input {
+ margin: 0.5rem 0;
+ padding: 0.5rem;
+ width: inherit;
+ height: 2rem;
+ border: none;
+ border-radius: 4px;
+ box-sizing: border-box;
+ }
+
+ input[type="submit"] {
+ height: 2.8rem;
+ font-size: 1rem;
+ background: #faa627;
+ cursor: pointer;
+ }
+}