chore(examples): add virtualized lists example

examples/virtualized-lists/index.js

@@ -0,0 +1,52 @@
+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>
+);
+
+const Select = ({ label, id, children, ...rest }) => (
+  <div>
+    <label htmlFor={id}>{label}</label>
+    <select id={id} {...rest}>
+      {children}
+    </select>
+  </div>
+);
+
+const Textarea = ({ label, id, ...rest }) => (
+  <div>
+    <label htmlFor={id}>{label}</label>
+    <textarea id={id} {...rest} />
+  </div>
+);
+
+function App() {
+  const { form } = useForm({
+    defaultValues: { firstName: "", lastName: "", framework: "", message: "" },
+    onSubmit: (values) => alert(JSON.stringify(values, undefined, 2))
+  });
+
+  return (
+    <form ref={form}>
+      <Field label="First Name" id="first-name" name="firstName" />
+      <Field label="Last Name" id="last-name" name="lastName" />
+      <Select label="Framework" id="framework" name="framework">
+        <option value="">I'm interesting in...</option>
+        <option value="react">React</option>
+        <option value="vue">Vue</option>
+        <option value="angular">Angular</option>
+        <option value="svelte">Svelte</option>
+      </Select>
+      <Textarea label="Message" id="message" name="message" />
+      <input type="submit" />
+    </form>
+  );
+}
+
+render(<App />, document.getElementById("root"));

examples/virtualized-lists/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "rcf-virtualized-lists",
+  "description": "The virtualized lists example of RCF.",
+  "main": "index.js",
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-cool-form": "latest",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.3"
+  },
+  "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/virtualized-lists/styles.scss

@@ -0,0 +1,43 @@
+body {
+  font-family: sans-serif;
+  background: #1a1a1a;
+}
+
+form {
+  margin: 3rem auto 0;
+  width: 24rem;
+
+  div {
+    width: inherit;
+    margin-bottom: 1rem;
+  }
+
+  label {
+    display: block;
+    color: #fff;
+  }
+
+  input,
+  select,
+  textarea {
+    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.5rem;
+    font-size: 1rem;
+    color: #fff;
+    background: #0971f1;
+    cursor: pointer;
+  }
+
+  textarea {
+    height: 5rem;
+  }
+}