# @dmytromykhailiuk/dynamic-view-react

> JSON powered / Dynamic view in React

Latest version **1.0.2** (published 2023-03-16) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @dmytromykhailiuk/dynamic-view-react
pnpm add @dmytromykhailiuk/dynamic-view-react
yarn add @dmytromykhailiuk/dynamic-view-react
bun add @dmytromykhailiuk/dynamic-view-react
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-03-16 |
| First published | 2023-03-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 71.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Dmytro Mykhailiuk |
| Maintainers | dmytromykhailiuk |

## Links

- npm: https://www.npmjs.com/package/@dmytromykhailiuk/dynamic-view-react
- Repository: https://github.com/dmytromykhailiuk/dynamic-view-react
- Homepage: https://github.com/dmytromykhailiuk/dynamic-view-react#readme
- Issues: https://github.com/dmytromykhailiuk/dynamic-view-react/issues
- npm.io page: https://npm.io/package/@dmytromykhailiuk/dynamic-view-react

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-reactive-form](https://npm.io/package/react-reactive-form.md) ^2.0.1

## Recent versions

- 1.0.2 (latest) — 2023-03-16
- 1.0.1 — 2023-03-14
- 1.0.0 — 2023-03-14

## README

# JSON powered / Dynamic view and Forms in React

**A way to connect Dependency Injection Container to React applications**

(Formly clone for React! [Formly Docs](https://formly.dev/))

This package is using [react-reactive-form](https://github.com/bietkul/react-reactive-form) module under the hood!

## Installation

```sh
npm i @dmytromykhailiuk/dynamic-view-react
```

**Interesting packages**

- [Dependency Injection Container](https://www.npmjs.com/package/@dmytromykhailiuk/dependency-injection-container)
- [React Dependency Injection Module](https://www.npmjs.com/package/@dmytromykhailiuk/react-di-module)
- [RxJS React Redux Effects](https://www.npmjs.com/package/@dmytromykhailiuk/rx-react-redux-effect)
- [Condition Flow Engine](https://www.npmjs.com/package/@dmytromykhailiuk/condition-flow-engine)

## Example of usage

```typescript

import { DynamicViewComponent, DynamicView, FieldConfig, TypeFn, ControlFn, WrapperFn } from '@dmytromykhailiuk/dynamic-view-react';

const Input: TypeFn = ({ handler, config }) => {
  return (
    <div>
      {config?.props?.label && <div>{ config?.props?.label }</div>}
      <input {...handler()} placeholder={config?.props?.placeholder || ''} />
    </div>
  )
}

const FriendsList: TypeFn = ({ children, add }: any) => (
  <div>
    <h2>Friends list</h2>
    { children }
    <button style={{ marginTop: '30px' }} onClick={add}>Add friend</button>
  </div>
);

const Checkbox: TypeFn = ({ handler, config: { props: { label } } }) => {
  return <div>
    <input {...handler('checkbox')} />
    <span>{ label }</span>
  </div> 
}

const SubmitButton: ControlFn = memo(({ submit }) => {
  return <button style={{ marginTop: '30px' }} onClick={submit}>Submit</button>
});

const FriendInformation: WrapperFn = ({ children, control }) => {
  const position = ((control.parent as FormArray).controls || []).findIndex(el => el === control) + 1;

  const removeFriendInformation = useCallback(() => {
    control.parent.meta.remove(position - 1);
  }, [position])

  return <div>
    <h4>Friend { position } Information</h4>
    { children }
    <button onClick={removeFriendInformation}>remove friend information</button>
  </div>
}

DynamicView.registerTypes([
  { name: 'input', component: Input },
  { name: 'checkbox', component: Checkbox },
  { name: 'friends-list', component: FriendsList }
]);

DynamicView.registerControls([
  { name: 'submit-button', component: SubmitButton }
]);

DynamicView.registerWrappers([
  { name: 'friend-information', component: FriendInformation }
]);

const fields: FieldConfig[] = [
  {
    key: 'firstName',
    type: 'input',
    props: {
      label: 'Your First Name',
      placeholder: 'Write your first name...'
    },
    expressions: {
      'props.label': 'String(model?.firstName || "").split(" ").length > 1 ? "Your Full Name" : "Your First Name"'
    }
  },
  {
    key: 'secondName',
    type: 'input',
    props: {
      label: 'Your Second Name',
      placeholder: 'Write your second name...'
    },
    expressions: {
      hide: 'String(model?.firstName || "").split(" ").length > 1'
    }
  },
  {
    key: 'showFriendsList',
    type: 'checkbox',
    props: {
      label: 'Show friends list'
    }
  },
  {
    key: 'friends',
    type: 'friends-list',
    expressions: {
      hide: '!model?.showFriendsList'
    },
    fieldArray: {
      wrappers: ['friend-information'],
      fieldGroup: [
        {
          key: 'name',
          type: 'input',
          props: {
            label: 'Friend Name',
            placeholder: 'Write your friend name...'
          }
        },
        {
          key: 'phoneNumber',
          type: 'input',
          props: {
            label: 'Friend phone number',
            placeholder: 'Write your friend phone number...'
          }
        }
      ]
    }
  },
  {
    control: 'submit-button'
  }
]

export const FormComponent = () => {

  const model = {
    //...
  }

  const formState = {
    //...
  }

  const onChange = (data) => {
    //...
  }

  const onSubmit = (data) => {
    //...
  }

  return (
    <DynamicViewComponent 
      fields={fields} // we can change "fields" on fly and DynamicView will rerender
      model={model} // we can change "model" on fly and DynamicView will rerender
      formState={formState} // we can change "formState" on fly and DynamicView will rerender
      onChange={onChange}
      onSubmit={onSubmit}
    />
  )
}

```

---
_Source: https://npm.io/package/@dmytromykhailiuk/dynamic-view-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._