{"_id":"@dmytromykhailiuk/dynamic-view-react","_rev":"4-58f5fa8ea9e15c7b998ee93a8a042d64","name":"@dmytromykhailiuk/dynamic-view-react","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@dmytromykhailiuk/dynamic-view-react","version":"1.0.0","author":{"name":"Dmytro Mykhailiuk"},"license":"ISC","_id":"@dmytromykhailiuk/dynamic-view-react@1.0.0","maintainers":[{"name":"dmytromykhailiuk","email":"dimamykhayluk@gmail.com"}],"homepage":"https://github.com/dmytromykhailiuk/react-di-module#readme","bugs":{"url":"https://github.com/dmytromykhailiuk/react-di-module/issues"},"dist":{"shasum":"7958b1d892b29e5037f875357266321f66fdf2c8","tarball":"https://registry.npmjs.org/@dmytromykhailiuk/dynamic-view-react/-/dynamic-view-react-1.0.0.tgz","fileCount":3,"integrity":"sha512-vm3HYtkD2K7g8ekwhOLGHMMDgmazf4Gr3lBwQV6ZIlu0N9NC7g+rRt8OgLQndK3oazL2Fwy8dNLJTUOJZ4PzRA==","signatures":[{"sig":"MEQCIEnJIhWhpVLLL/fdRXMcGGyn++xwlnsHNHaXdfK8OrePAiAcvO5r6z4hHcs2w2drsWLtFTEEyT/x2OW69w6NVvuNhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3029,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEO3TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBbBAAi0WJTz/7jxPhG/ro947NwyPIXqeTbaAsb3ILPcUdiFndYfXl\r\nPOpoiOQb0+XSH606F7h5pL6NxPQCPWG6jSr3mXVdBYvAgOx1HIEGiADu6fM6\r\nrrQkmP+Qip6ACJKZe+RcLii66NN28bPIrm6dVhTHp+uF1wTmfzY6FeyTyU3Y\r\nhlUSgVEljKhmLHNPsae/1mPBImVaDYr4fseuElgSG8Hx48QlUuJomFd2d9Sw\r\ne3v7XdDxK1Lq26pAN/O9RRz75v4SKLk23Ps5fw/1zoEEhRS31WkAon3ZY2Wr\r\nd3aIctqq8jSGNH2zmNKAfd2eujzA2H99HzpG3dkUZQhKhqw/+z2nClFqiWNN\r\nYk4OA2rlA/FTwCYF9p0U8d0eZIybY4Lp53CBxFWXwaFvusYkg06PrZrWQ+9Z\r\nj/4PizKaKjta1olfdM9v4acWr3iwOVGjq01vp6AhmFSTBQHp1TGOn+FB2v+6\r\nIFPzTiJamCQw2my1TV8GGlaSVfpeGCu8pfRNOCYUZI7Q0UWXxg5qYg7vSDsP\r\n3yHVmQuHGk5MLJW+XbDI9V4LXXXWfXnT/dowJWapTAVhfhshhROO1+biODpa\r\ngUDVnD4IRd7mhg6ZVqNVXpinYuqe8kd7u7Ub37T0U5commY3iy6JOX7UwMDu\r\nSGrI3XNTE3meXw4VdqgljRG8yVXF/TwGjsw=\r\n=tX0f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/src/index.js","types":"dist/src/index.d.ts","gitHead":"e971fb4bb4ecb6be419efa9f417a689a4d08be20","scripts":{"compile":"npx tsc"},"_npmUser":{"name":"dmytromykhailiuk","email":"dimamykhayluk@gmail.com"},"repository":{"url":"git+https://github.com/dmytromykhailiuk/react-di-module.git","type":"git"},"_npmVersion":"8.19.2","description":"JSON powered / Dynamic view in React","directories":{},"_nodeVersion":"18.10.0","dependencies":{"react":"^18.2.0","react-reactive-form":"^2.0.1"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^8.0.3","eslint":"^8.35.0","prettier":"^2.8.4","typescript":"^4.9.5","@types/node":"^18.15.0","@types/react":"^18.0.28","eslint-config-prettier":"^8.7.0","@typescript-eslint/parser":"^5.54.1","eslint-config-airbnb-typescript":"^17.0.0","@typescript-eslint/eslint-plugin":"^5.54.1"},"_npmOperationalInternal":{"tmp":"tmp/dynamic-view-react_1.0.0_1678831059758_0.7931861554858892","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.1":{"name":"@dmytromykhailiuk/dynamic-view-react","version":"1.0.1","author":{"name":"Dmytro Mykhailiuk"},"license":"ISC","_id":"@dmytromykhailiuk/dynamic-view-react@1.0.1","maintainers":[{"name":"dmytromykhailiuk","email":"dimamykhayluk@gmail.com"}],"homepage":"https://github.com/dmytromykhailiuk/react-di-module#readme","bugs":{"url":"https://github.com/dmytromykhailiuk/react-di-module/issues"},"dist":{"shasum":"105abb04765a8f7a0867de9dc8cef8c5dfaa0335","tarball":"https://registry.npmjs.org/@dmytromykhailiuk/dynamic-view-react/-/dynamic-view-react-1.0.1.tgz","fileCount":6,"integrity":"sha512-i8tKOkM7cUemaSs1aJ1z8rI4uTeIyWVPMNBpxuKSPrvEr/AW1LZDiFpdHfn3f9kcsF3etheyHkP+WUL4XnnyYA==","signatures":[{"sig":"MEYCIQC+1XoM9r7hNaXhdVgfcbQRzlAS3Y8RryN2x8nDOt27NwIhAKI6nnQuJKJ4y1UlbeFCoDSEFJpY7Jnr6bmJrv1ylzfr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":71603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEPbjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmog9Q/+PGJpcaDIftGwkgYlGkVw3nEw9R+OPS5jMeObqG+BO0I8Ovb/\r\nOlXHED1klM03gSlO5ikWo45EIyAzHt0A/V0qDVbPkbODfDzRFL4H04d+mV4g\r\nuC73rqidTvfX5TijdnT3JVqxwD4yEOPVJ9V7onINTnMyoj2trrng/3e5UFui\r\nDfpS5fxwYrKGZPowreeL5j1IMjIq1liPBRzU3sv5vqGhmrc8CPJlaj3OEaYm\r\nt5sWGklfjgGqjJWN0b98DeDPMLpjCDZAeE7SKhD8H5dRIfAyUgUXdWkFaNJP\r\nQg/uPZUfWoQEi8owMR9c5AILFc8u3d1kIY3wUZq3JKBqsBF7Q8G3mRabsTNd\r\n4kL2wHi16kM/MbYWmbgIlws7z4ad8W6fhm5tSWO+4CJqNyyABWpuG/nG+o3Q\r\ncqP/kX3nhUgZOjlw9XXJoylIVolNoNZfD+3vWW45i4Rr0MCIZS2aDpDj9Zl+\r\nN+uQv1GeuYSwV3su2puksA5dwF5LhwrnpJIGkhzhLkk9/G9Q84WeIkEnxaXx\r\nM7VkljD/gygTBhVF3kmMxurqABEAP8p6uZ/lN/ChZ6tekVXKP7XMw552SA8Z\r\nAXW6WR/GH47RsTA4RTMMuqtrbGtVCO0Y8bimwM3FNTtC6jDAZuobaPsgBN/P\r\nnZXh/PTuvhVnyA5NGMAbWInvOizTU7CnYis=\r\n=apta\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/src/index.js","types":"dist/src/index.d.ts","gitHead":"6b4770ce064616f309729c8a1713dc8d07804076","scripts":{"compile":"npx tsc"},"_npmUser":{"name":"dmytromykhailiuk","email":"dimamykhayluk@gmail.com"},"repository":{"url":"git+https://github.com/dmytromykhailiuk/react-di-module.git","type":"git"},"_npmVersion":"8.19.2","description":"JSON powered / Dynamic view in React","directories":{},"_nodeVersion":"18.10.0","dependencies":{"react":"^18.2.0","react-reactive-form":"^2.0.1"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^8.0.3","eslint":"^8.35.0","prettier":"^2.8.4","typescript":"^4.9.5","@types/node":"^18.15.0","@types/react":"^18.0.28","eslint-config-prettier":"^8.7.0","@typescript-eslint/parser":"^5.54.1","eslint-config-airbnb-typescript":"^17.0.0","@typescript-eslint/eslint-plugin":"^5.54.1"},"_npmOperationalInternal":{"tmp":"tmp/dynamic-view-react_1.0.1_1678833378864_0.17858409750105642","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.2":{"name":"@dmytromykhailiuk/dynamic-view-react","version":"1.0.2","author":{"name":"Dmytro Mykhailiuk"},"license":"ISC","_id":"@dmytromykhailiuk/dynamic-view-react@1.0.2","maintainers":[{"name":"dmytromykhailiuk","email":"dimamykhayluk@gmail.com"}],"homepage":"https://github.com/dmytromykhailiuk/dynamic-view-react#readme","bugs":{"url":"https://github.com/dmytromykhailiuk/dynamic-view-react/issues"},"dist":{"shasum":"033195ddfce1eb276ed52ae0c8e05b476e904f27","tarball":"https://registry.npmjs.org/@dmytromykhailiuk/dynamic-view-react/-/dynamic-view-react-1.0.2.tgz","fileCount":6,"integrity":"sha512-2tOSZnHNFgllXKhtphifM37oynWBj3tqwnBoXjPdgn9+1pLTECpzBd6H8vfwkrGsNxvWvtWllBeOe4fyA7fpqg==","signatures":[{"sig":"MEYCIQCmm6MyOMcnxGbQ+zSRFJ4AmP/WKYX4/U4fB+0Ce6rJ9wIhAPeHD1+oHPlIzbD5cawTdAaNd+e/JxPRvhIXj9hULgVB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkE4slACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWrg//U7ydioLgTY+8AMjBlNvuswz0t9J5QkVgZ2rb42y+zEd9AaEj\r\nUGArXvMw5dWTePKm7+iaobEP8tqIKsyTHswdtT4USXGakBfhNG8eL7hJAUCL\r\nQacKR9EaQPHwT/jJZxW6FRczHFMq8n0x6F7TeOq5WF3WQ1YW3ysl9xnLhkNg\r\n9rPxyv5ngcyJj+lXrI8n+nQZqMznhY+jPa5DjyDSSxrSH2POMLbBqxYNIukG\r\n0bV9ARjhEL036OPZ3mgsDQaoYZmrdGNeLDVyE98QRvpGCsm7jTczReRfblLP\r\nFKdtPoHXHDBHd8+CH73wZwz6sQkxVcBoQnEaC8iYmSOG0wqYk0C0op5T7Uvn\r\n0BhhEaGDaVkE6uPFVn5TGqd2MmUczxmic0kqKH7HEiAIHR6Hl7hpsQ9nyy3D\r\nEfE9GcZ4QA20c79DW7sl0nR2i8ZyUzRZUL321JTpCPds4S/WIQXaUvJONT7V\r\nSEbV7NMu3Zltf+RF+tnnqdU9uWsTRJib+UfazHSP0EYNVNFhmYCY5zH7Sjqc\r\nJEqIMQv6Q2FD9QGFiXCy6SqxKiPuxxq7jbVkGYv6IdxcPvYMbunohJbVJX7R\r\n/JA/C1dz+xp6Lo+s/NNe1munCxAV5lBZOTT4BPr1rO0XK/w5AmRnmw59/wCV\r\nx7TcQF2HMU/aMY+rAs2HDt7F6rAFEJBUDpU=\r\n=1jFw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/src/index.js","types":"dist/src/index.d.ts","gitHead":"9a4ce42b579ca49acaea8f3172ef64f0d96ad74f","scripts":{"compile":"npx tsc"},"_npmUser":{"name":"dmytromykhailiuk","email":"dimamykhayluk@gmail.com"},"repository":{"url":"git+https://github.com/dmytromykhailiuk/dynamic-view-react.git","type":"git"},"_npmVersion":"8.19.2","description":"JSON powered / Dynamic view in React","directories":{},"_nodeVersion":"18.10.0","dependencies":{"react":"^18.2.0","react-reactive-form":"^2.0.1"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^8.0.3","eslint":"^8.35.0","prettier":"^2.8.4","typescript":"^4.9.5","@types/node":"^18.15.0","@types/react":"^18.0.28","eslint-config-prettier":"^8.7.0","@typescript-eslint/parser":"^5.54.1","eslint-config-airbnb-typescript":"^17.0.0","@typescript-eslint/eslint-plugin":"^5.54.1"},"_npmOperationalInternal":{"tmp":"tmp/dynamic-view-react_1.0.2_1679002405191_0.34916880558615837","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2023-03-14T21:57:39.677Z","modified":"2026-08-12T16:10:50.888Z","1.0.0":"2023-03-14T21:57:39.915Z","1.0.1":"2023-03-14T22:36:19.038Z","1.0.2":"2023-03-16T21:33:25.359Z"},"bugs":{"url":"https://github.com/dmytromykhailiuk/dynamic-view-react/issues"},"author":{"name":"Dmytro Mykhailiuk"},"license":"ISC","homepage":"https://github.com/dmytromykhailiuk/dynamic-view-react#readme","repository":{"url":"git+https://github.com/dmytromykhailiuk/dynamic-view-react.git","type":"git"},"description":"JSON powered / Dynamic view in React","maintainers":[{"name":"dmytromykhailiuk","email":"dimamykhayluk@gmail.com"}],"readme":"# JSON powered / Dynamic view and Forms in React\n\n**A way to connect Dependency Injection Container to React applications**\n\n(Formly clone for React! [Formly Docs](https://formly.dev/))\n\nThis package is using [react-reactive-form](https://github.com/bietkul/react-reactive-form) module under the hood!\n\n## Installation\n\n```sh\nnpm i @dmytromykhailiuk/dynamic-view-react\n```\n\n**Interesting packages**\n\n- [Dependency Injection Container](https://www.npmjs.com/package/@dmytromykhailiuk/dependency-injection-container)\n- [React Dependency Injection Module](https://www.npmjs.com/package/@dmytromykhailiuk/react-di-module)\n- [RxJS React Redux Effects](https://www.npmjs.com/package/@dmytromykhailiuk/rx-react-redux-effect)\n- [Condition Flow Engine](https://www.npmjs.com/package/@dmytromykhailiuk/condition-flow-engine)\n\n## Example of usage\n\n```typescript\n\nimport { DynamicViewComponent, DynamicView, FieldConfig, TypeFn, ControlFn, WrapperFn } from '@dmytromykhailiuk/dynamic-view-react';\n\nconst Input: TypeFn = ({ handler, config }) => {\n return (\n
\n {config?.props?.label &&
{ config?.props?.label }
}\n \n
\n )\n}\n\nconst FriendsList: TypeFn = ({ children, add }: any) => (\n
\n

Friends list

\n { children }\n \n
\n);\n\nconst Checkbox: TypeFn = ({ handler, config: { props: { label } } }) => {\n return
\n \n { label }\n
\n}\n\nconst SubmitButton: ControlFn = memo(({ submit }) => {\n return \n});\n\nconst FriendInformation: WrapperFn = ({ children, control }) => {\n const position = ((control.parent as FormArray).controls || []).findIndex(el => el === control) + 1;\n\n const removeFriendInformation = useCallback(() => {\n control.parent.meta.remove(position - 1);\n }, [position])\n\n return
\n

Friend { position } Information

\n { children }\n \n
\n}\n\nDynamicView.registerTypes([\n { name: 'input', component: Input },\n { name: 'checkbox', component: Checkbox },\n { name: 'friends-list', component: FriendsList }\n]);\n\nDynamicView.registerControls([\n { name: 'submit-button', component: SubmitButton }\n]);\n\nDynamicView.registerWrappers([\n { name: 'friend-information', component: FriendInformation }\n]);\n\nconst fields: FieldConfig[] = [\n {\n key: 'firstName',\n type: 'input',\n props: {\n label: 'Your First Name',\n placeholder: 'Write your first name...'\n },\n expressions: {\n 'props.label': 'String(model?.firstName || \"\").split(\" \").length > 1 ? \"Your Full Name\" : \"Your First Name\"'\n }\n },\n {\n key: 'secondName',\n type: 'input',\n props: {\n label: 'Your Second Name',\n placeholder: 'Write your second name...'\n },\n expressions: {\n hide: 'String(model?.firstName || \"\").split(\" \").length > 1'\n }\n },\n {\n key: 'showFriendsList',\n type: 'checkbox',\n props: {\n label: 'Show friends list'\n }\n },\n {\n key: 'friends',\n type: 'friends-list',\n expressions: {\n hide: '!model?.showFriendsList'\n },\n fieldArray: {\n wrappers: ['friend-information'],\n fieldGroup: [\n {\n key: 'name',\n type: 'input',\n props: {\n label: 'Friend Name',\n placeholder: 'Write your friend name...'\n }\n },\n {\n key: 'phoneNumber',\n type: 'input',\n props: {\n label: 'Friend phone number',\n placeholder: 'Write your friend phone number...'\n }\n }\n ]\n }\n },\n {\n control: 'submit-button'\n }\n]\n\nexport const FormComponent = () => {\n\n const model = {\n //...\n }\n\n const formState = {\n //...\n }\n\n const onChange = (data) => {\n //...\n }\n\n const onSubmit = (data) => {\n //...\n }\n\n return (\n \n )\n}\n\n```\n","readmeFilename":"README.md"}