@os-design/form 1.0.53 → 1.0.55

package/README.md

@@ -6,7 +6,7 @@ Create forms in React and React Native much faster and easier.
 
 - 🤓 Rerenders only updated fields, not the whole form.
 - 📱 Use with any design system or native components. Supports React Native.
-- 0️⃣ Tiny size (~2 KB). Zero dependencies.
+- 2️⃣ Tiny size (~2 KB). Zero dependencies.
 - 📙 Lots of useful features.
 
 ## Installation
@@ -25,10 +25,15 @@ Let's assume that we want to build a form for creating blog posts. To create a f
 import { useForm } from '@os-design/form';
 
 const Form: React.FC = () => {
-  const { Field, form } = useForm({
-    title: '',
-    content: '',
-  });
+  const initValues = useMemo(
+    () => ({
+      title: '',
+      content: '',
+    }),
+    []
+  );
+
+  const { Field, form } = useForm(initValues);
 
   const onSubmit = useCallback(() => {
     // To get all the form data
@@ -78,10 +83,15 @@ To solve this problem and update only those options that have changed, we need t
 
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form } = useForm<ComplexFormData>({
-    name: '',
-    options: { min: null, max: null },
-  });
+  const initValues = useMemo<ComplexFormData>(
+    () => ({
+      name: '',
+      options: { min: null, max: null },
+    }),
+    []
+  );
+
+  const { Field, form } = useForm(initValues);
 
   const onSubmit = useCallback(() => {
     console.log(form.values.getAll());
@@ -112,10 +122,15 @@ If the user entered incorrect values, the form should display errors. To support
 
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form } = useForm({
-    title: '',
-    content: '',
-  });
+  const initValues = useMemo(
+    () => ({
+      title: '',
+      content: '',
+    }),
+    []
+  );
+
+  const { Field, form } = useForm(initValues);
 
   const onSubmit = useCallback(() => {
     form.errors.set('title', 'The title is too long 😔');
@@ -156,10 +171,15 @@ const Error: React.FC = () => {
 };
 
 const Form: React.FC = () => {
-  const { Field, form } = useForm({
-    title: '',
-    content: '',
-  });
+  const initValues = useMemo(
+    () => ({
+      title: '',
+      content: '',
+    }),
+    []
+  );
+
+  const { Field, form } = useForm(initValues);
 
   const onSubmit = useCallback(() => {
     // Set the error
@@ -230,10 +250,15 @@ const BaseForm: React.FC<BaseFormProps> = ({ children }) => {
 };
 
 const FormCreate: React.FC = () => {
-  const { form } = useForm<FormData>({
-    title: '',
-    content: '',
-  });
+  const initValues = useMemo<FormData>(
+    () => ({
+      title: '',
+      content: '',
+    }),
+    []
+  );
+
+  const { form } = useForm(initValues);
 
   const onCreate = useCallback(() => {
     console.log('Creating...', form.values.getAll());
@@ -249,10 +274,15 @@ const FormCreate: React.FC = () => {
 };
 
 const FormUpdate: React.FC = () => {
-  const { form } = useForm<FormData>({
-    title: 'Title',
-    content: 'Content',
-  });
+  const initValues = useMemo<FormData>(
+    () => ({
+      title: 'Title',
+      content: 'Content',
+    }),
+    []
+  );
+
+  const { form } = useForm(initValues);
 
   const onUpdate = useCallback(() => {
     console.log('Updating...', form.values.getAll());
@@ -274,10 +304,15 @@ Let's upgrade our form and allow the user to click on the `Save` button only if
 
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form, modified } = useForm({
-    title: 'Title',
-    content: 'Content',
-  });
+  const initValues = useMemo(
+    () => ({
+      title: 'Title',
+      content: 'Content',
+    }),
+    []
+  );
+
+  const { Field, form, modified } = useForm(initValues);
 
   const onSubmit = useCallback(() => {
     console.log(form.values.getAll());
@@ -303,10 +338,15 @@ If the form has many fields, it is better to send only the changed values to the
 
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form, modifiedFields } = useForm({
-    title: '',
-    content: '',
-  });
+  const initValues = useMemo(
+    () => ({
+      title: '',
+      content: '',
+    }),
+    []
+  );
+
+  const { Field, form, modifiedFields } = useForm(initValues);
 
   const onSubmit = useCallback(() => {
     const onlyChangedValues = modifiedFields.reduce(
@@ -342,10 +382,15 @@ const ResetButton: React.FC<ButtonProps> = (props) => (
 );
 
 const Form: React.FC = () => {
-  const { Field, form } = useForm({
-    name: 'Kate',
-    password: 'secret',
-  });
+  const initValues = useMemo(
+    () => ({
+      name: 'Kate',
+      password: 'secret',
+    }),
+    []
+  );
+
+  const { Field, form } = useForm(initValues);
 
   const onSubmit = useCallback(() => {
     console.log(form.values.getAll());
@@ -381,10 +426,15 @@ To reset the entire form (e.g. when the modal with the form is closed), call `fo
 
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form } = useForm({
-    title: 'Title',
-    content: 'Content',
-  });
+  const initValues = useMemo(
+    () => ({
+      title: 'Title',
+      content: 'Content',
+    }),
+    []
+  );
+
+  const { Field, form } = useForm(initValues);
 
   const onReset = useCallback(() => form.reset(), [form]);
 
@@ -406,7 +456,9 @@ The fields are rerendered ONLY when the value or error has been changed. If your
 // ❌ Incorrect because the input will not be rerendered when the `number` is updated.
 // The text in the input will always be `Number is 0`.
 const Form: React.FC = () => {
-  const { Field } = useForm({ name: '' });
+  const initValues = useMemo(() => ({ name: '' }), []);
+
+  const { Field } = useForm(initValues);
 
   const [number, setNumber] = useState(0);
 
@@ -432,7 +484,9 @@ To solve this issue, you need to pass additional data on which the field depends
 ```tsx
 // ✅ Correct
 const Form: React.FC = () => {
-  const { Field } = useForm({ name: '' });
+  const initValues = useMemo(() => ({ name: '' }), []);
+
+  const { Field } = useForm(initValues);
 
   const [number, setNumber] = useState(0);
 
@@ -460,10 +514,15 @@ The entered value in the field can be transformed. For example, the email addres
 
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form } = useForm({
-    email: '',
-    password: '',
-  });
+  const initValues = useMemo(
+    () => ({
+      email: '',
+      password: '',
+    }),
+    []
+  );
+
+  const { Field, form } = useForm(initValues);
 
   const onSubmit = useCallback(() => {
     console.log(form.values.getAll());
@@ -494,10 +553,15 @@ Let's consider the first case. To implement it, use the `useTransformer` hook.
 
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form, useTransformer } = useForm({
-    title: '',
-    metaTitle: '',
-  });
+  const initValues = useMemo(
+    () => ({
+      title: '',
+      metaTitle: '',
+    }),
+    []
+  );
+
+  const { Field, form, useTransformer } = useForm(initValues);
 
   const onSubmit = useCallback(() => {
     console.log(form.values.getAll());
@@ -527,10 +591,15 @@ For example, if the url slug is generated by the title on the server side, you n
 
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form, useValue } = useForm({
-    title: '',
-    urlSlug: '',
-  });
+  const initValues = useMemo(
+    () => ({
+      title: '',
+      urlSlug: '',
+    }),
+    []
+  );
+
+  const { Field, form, useValue } = useForm(initValues);
 
   const onSubmit = useCallback(() => {
     console.log(form.values.getAll());
@@ -561,10 +630,15 @@ You can also track changes to all fields, for example, for logging.
 
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form } = useForm({
-    title: '',
-    content: '',
-  });
+  const initValues = useMemo(
+    () => ({
+      title: '',
+      content: '',
+    }),
+    []
+  );
+
+  const { Field, form } = useForm(initValues);
 
   const onSubmit = useCallback(() => {
     console.log(form.values.getAll());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/form",
-  "version": "1.0.53",
+  "version": "1.0.55",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -30,11 +30,11 @@
     "access": "public"
   },
   "devDependencies": {
-    "@os-design/core": "^1.0.220",
+    "@os-design/core": "^1.0.222",
     "@os-design/icons": "^1.0.55"
   },
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "be725abf9ac3cb9a455d42c8d3c31d7f7f015e11"
+  "gitHead": "ca3e642872fe0be6503d1d6bf354bac2f9d1bc81"
 }