@os-design/form 1.0.0 → 1.0.1

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️⃣ Small size. Zero dependencies.
+- 0️⃣ Tiny size (~1.5 KB). Zero dependencies.
 - 📙 Lots of useful features.
 
 ## Installation
@@ -30,10 +30,14 @@ interface FormData {
 }
 
 const Form: React.FC = () => {
-  const { Field, form } = useForm<FormData>({ title: '', content: '' });
+  const { Field, form } = useForm<FormData>({
+    title: '',
+    content: '',
+  });
 
   const onSubmit = useCallback(() => {
-    console.log(form.values.getAll()); // To get all the form data
+    // To get all the form data
+    console.log(form.values.getAll());
   }, []);
 
   return (
@@ -54,7 +58,10 @@ If the user entered incorrect values, the form should display errors. To support
 
 ```tsx
 const Form: React.FC = () => {
-  const { Field, form } = useForm<FormData>({ title: '', content: '' });
+  const { Field, form } = useForm<FormData>({
+    title: '',
+    content: '',
+  });
 
   const onSubmit = useCallback(() => {
     form.errors.set('title', 'The title is too long 😔');
@@ -100,14 +107,18 @@ const Error: React.FC = () => {
 };
 
 const Form: React.FC = () => {
-  const { Field, form } = useForm<FormData>({ title: '', content: '' });
+  const { Field, form } = useForm<FormData>({
+    title: '',
+    content: '',
+  });
 
   const onSubmit = useCallback(() => {
     form.errors.set('_error', 'The server went on vacation 🌴'); // Set the error
     console.log(form.values.getAll()); // { title: '', content: '' } - data only, without the `_error` prop
   }, []);
 
-  // Wrap your form in a `FormProvider` to pass the `form` to the child components (to the `Error` component in our case)
+  // Wrap your form in a `FormProvider` to pass the `form`
+  // to the child components (to the `Error` component in our case)
   return (
     <FormProvider form={form}>
       <>
@@ -161,7 +172,10 @@ const BaseForm: React.FC<BaseFormProps> = ({ children }) => {
 };
 
 const FormCreate: React.FC = () => {
-  const { form } = useForm<FormData>({ title: '', content: '' });
+  const { form } = useForm<FormData>({
+    title: '',
+    content: '',
+  });
 
   const onCreate = useCallback(() => {
     console.log('Creating...', form.values.getAll());
@@ -177,7 +191,10 @@ const FormCreate: React.FC = () => {
 };
 
 const FormUpdate: React.FC = () => {
-  const { form } = useForm<FormData>({ title: 'Title', content: 'Content' });
+  const { form } = useForm<FormData>({
+    title: 'Title',
+    content: 'Content',
+  });
 
   const onUpdate = useCallback(() => {
     console.log('Updating...', form.values.getAll());
@@ -325,7 +342,10 @@ interface PersonData {
 }
 
 const Form: React.FC = () => {
-  const { Field, form } = useForm<PersonData>({ name: 'Kate', age: 18 });
+  const { Field, form } = useForm<PersonData>({
+    name: 'Kate',
+    age: 18,
+  });
 
   const onSubmit = useCallback(() => {
     console.log(form.values.getAll());
@@ -385,6 +405,15 @@ const Form: React.FC = () => {
 };
 ```
 
+You can update any number of fields, not just one. For example, every time the title changes, we can set `metaTitle` and `metaDescription` to an empty string.
+
+```tsx
+useTransformer('title', () => ({
+  metaTitle: '',
+  metaDescription: '',
+}));
+```
+
 ## 👀 Tracking field changes
 
 You can track changes for a specific field using the `useValue` hook.
@@ -410,7 +439,8 @@ const Form: React.FC = () => {
   const title = useValue('title');
 
   useEffect(() => {
-    // Send a request to the server to generate the url slug by title
+    // Send a request to the server
+    // to generate the url slug by title
     setTimeout(() => {
       // Update the url slug field
       form.values.set('urlSlug', title.length.toString());
@@ -456,3 +486,5 @@ const Form: React.FC = () => {
   );
 };
 ```
+
+That's all for now. I hope this library will help you create any forms faster. 😉

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/form",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -34,5 +34,5 @@
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "a325c58ef4a1b6af0b275db9b392f7fe9a856fde"
+  "gitHead": "0ee51ebd7e24197af32f68d5354e7dc9a8645af1"
 }