-
Notifications
You must be signed in to change notification settings - Fork 0
/
c6bd7e46.33f20e4e.js
1 lines (1 loc) · 7.19 KB
/
c6bd7e46.33f20e4e.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{104:function(e,t,n){"use strict";n.d(t,"a",(function(){return m})),n.d(t,"b",(function(){return u}));var r=n(0),a=n.n(r);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),b=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},m=function(e){var t=b(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},d=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,i=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),m=b(n),d=r,u=m["".concat(i,".").concat(d)]||m[d]||p[d]||o;return n?a.a.createElement(u,c(c({ref:t},l),{},{components:n})):a.a.createElement(u,c({ref:t},l))}));function u(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,i=new Array(o);i[0]=d;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:r,i[1]=c;for(var l=2;l<o;l++)i[l]=n[l];return a.a.createElement.apply(null,i)}return a.a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},93:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return o})),n.d(t,"metadata",(function(){return i})),n.d(t,"toc",(function(){return c})),n.d(t,"default",(function(){return l}));var r=n(3),a=(n(0),n(104));const o={id:"gettingStarted",title:"Getting Started",sidebar_label:"Getting Started",slug:"/"},i={unversionedId:"gettingStarted",id:"gettingStarted",isDocsHomePage:!1,title:"Getting Started",description:"Introduction",source:"@site/docs/gettingStarted.md",slug:"/",permalink:"/docs/",editUrl:"https://github.com/formstjs/formst-docs/docs/gettingStarted.md",version:"current",sidebar_label:"Getting Started",sidebar:"someSidebar",next:{title:"Validation",permalink:"/docs/validation"}},c=[{value:"Introduction",id:"introduction",children:[]},{value:"Installation",id:"installation",children:[{value:"Basic Usage",id:"basic-usage",children:[]}]}],s={toc:c};function l({components:e,...t}){return Object(a.b)("wrapper",Object(r.a)({},s,t,{components:e,mdxType:"MDXLayout"}),Object(a.b)("h2",{id:"introduction"},"Introduction"),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},Object(a.b)("strong",{parentName:"li"},"Formst")," is the new way to create and handle forms. Unlike most form libraries that are UI-first, Formst is data first. It is based on ",Object(a.b)("strong",{parentName:"li"},Object(a.b)("em",{parentName:"strong"},"MST")),"(MobX-State-Tree). This library helps you create high-performance forms with interdependent fields within tables and add validations.")),Object(a.b)("p",null,"Note: FormST has peer dependencies and requires ",Object(a.b)("a",Object(r.a)({parentName:"p"},{href:"https://mobx.js.org/"}),"mobx"),", ",Object(a.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.npmjs.com/package/mobx-react-lite"}),"mobx-react-lite"),"/",Object(a.b)("a",Object(r.a)({parentName:"p"},{href:"https://github.com/mobxjs/mobx-react"}),"mobx-react")," and ",Object(a.b)("a",Object(r.a)({parentName:"p"},{href:"https://mobx-state-tree.js.org/"}),"mobx-state-tree"),"."),Object(a.b)("h2",{id:"installation"},"Installation"),Object(a.b)("p",null,"Use ",Object(a.b)("strong",{parentName:"p"},"yarn")," or ",Object(a.b)("strong",{parentName:"p"},"npm")," to install this library:"),Object(a.b)("pre",null,Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-bash"}),"# yarn\nyarn add formst\n\n# npm\nnpm add formst\n")),Object(a.b)("h3",{id:"basic-usage"},"Basic Usage"),Object(a.b)("ol",null,Object(a.b)("li",{parentName:"ol"},Object(a.b)("p",{parentName:"li"},"Create a form model:"),Object(a.b)("pre",{parentName:"li"},Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-tsx"}),"const TodoForm = createFormModel(\n 'TodoForm',\n\n {\n title: types.string,\n\n description: types.string,\n },\n\n {\n validation: {\n title: ['required'],\n\n description: 'required',\n },\n },\n);\n"))),Object(a.b)("li",{parentName:"ol"},Object(a.b)("p",{parentName:"li"},"Create an instance of the model:"),Object(a.b)("pre",{parentName:"li"},Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-tsx"}),"const todoForm = TodoForm.create({\n title: '',\n description: '',\n});\n"))),Object(a.b)("li",{parentName:"ol"},Object(a.b)("p",{parentName:"li"},"Wrap the components inside ",Object(a.b)("strong",{parentName:"p"},"Formst")," and use ",Object(a.b)("em",{parentName:"p"},"Field")," API to render the fields:"),Object(a.b)("pre",{parentName:"li"},Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-tsx"}),'export default observer(() => {\n todoForm.onSubmit((formInstance: Instance<typeof todoForm>) => {\n console.log(formInstance.getFormData());\n formInstance.setSubmitting(false);\n });\n return (\n <Formst formInstance={todoForm}>\n <form onSubmit={todoForm.handleSubmit}>\n <Field name="title" />\n <ErrorMessage name="title" />\n <br />\n <Field name="description" />\n <ErrorMessage name="description" />\n\n <button type="submit">Submit</button>\n </form>\n </Formst>\n });\n'))),Object(a.b)("li",{parentName:"ol"},Object(a.b)("p",{parentName:"li"},"Optional: If you don't like ",Object(a.b)("inlineCode",{parentName:"p"},"Field")," API, you can directly plug this to an element."),Object(a.b)("p",{parentName:"li"},"Note: For this to work, you need to wrap the entire component inside observer."),Object(a.b)("pre",{parentName:"li"},Object(a.b)("code",Object(r.a)({parentName:"pre"},{className:"language-tsx"}),'export default observer(() => {\n return (\n <Formst formInstance={todoForm}>\n <form onSubmit={todoForm.handleSubmit}>\n <input\n name="title"\n value={todoForm.title}\n onChange={todoForm.handleChange}\n onBlur={todoForm.handleBlur}></input>\n <ErrorMessage name="title" />\n\n <br />\n\n <Field name="description" />\n <ErrorMessage name="description" />\n\n <button type="submit">Submit</button>\n </form>\n </Formst>\n );\n});\n')))))}l.isMDXComponent=!0}}]);