# @manojadams/metaforms-core

> React Library for rendering dynamic forms from json schema

Latest version **5.0.11** (published 2026-06-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @manojadams/metaforms-core
pnpm add @manojadams/metaforms-core
yarn add @manojadams/metaforms-core
bun add @manojadams/metaforms-core
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.11 |
| Published | 2026-06-15 |
| First published | 2022-08-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16 |
| Dependencies | 5 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | manojadams |
| Maintainers | manojbaruah |

## Links

- npm: https://www.npmjs.com/package/@manojadams/metaforms-core
- Repository: https://github.com/manojadams/metaforms-core
- Homepage: https://manojadams.github.io/metaforms-core/
- Issues: https://github.com/manojadams/metaforms-core/issues
- npm.io page: https://npm.io/package/@manojadams/metaforms-core

## Dependencies (5)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [eventemitter3](https://npm.io/package/eventemitter3.md) ^4.0.7
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.6
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.6
- [layout-emotions](https://npm.io/package/layout-emotions.md) ^1.0.19

## Recent versions

- 5.0.11 (latest) — 2026-06-15
- 5.0.2-beta.0 (beta) — 2026-05-14
- 4.3.4-alpha.1 (alpha) — 2026-04-30
- 5.0.4 — 2026-05-21
- 5.0.3 — 2026-05-21
- 5.0.2 — 2026-05-18
- 4.4.5 — 2026-05-12
- 4.4.3 — 2026-05-10
- 4.4.2 — 2026-05-09
- 4.4.1 — 2026-05-09
- 4.4.0 — 2026-05-01
- 4.3.4-alpha.0 — 2026-04-30
- 4.3.3 — 2026-04-25
- 4.3.2 — 2026-04-08
- 4.3.1 — 2026-04-07
- … 93 more at https://npm.io/package/@manojadams/metaforms-core/versions

## README

# metaform-core
A framework for building react form libraries. Create your react form components and use this framework for adding form behavior using JSON-based schema.

## Introduction
This library reads the JSON-based schema and lays out beautiful forms.
It acts as a base for creating a dynamic form library.

## Main features
- Layouting configuration
- Support for multiple-page forms
- Support for field dependencies
- Support custom components

## Core components/concepts
- Form control (BaseFormControl)
- Form group (BaseFormGroup)
- Form stepper (BaseFormStepper)

### Form control (BaseFormControl)
  This is a class containing declarations of basic form controls as well as some other advanced form controls. 
  
### Form group (BaseFormGroup)
  Contains declarations of basic form grouping controls.

### Form stepper (BasicFormStepper)
  This is another type of form grouping that contains declarations to implement stepper functionalities for your form.

## How to use
  This library contains abstract declarations and requires the user to implement his own core components.
  - BasicFormControl - for basic components
  - BasicFormGroup - for basic form grouping
  - BasicFormStepper = for stepper functionalities
  - Write your classes (typescript) and extend the above controls.
  - To know details, check the documentation.
  
## Implement an `email` control
````typescript
class MyFormControl extends CoreFormControl {
  /**
   * Implement email
   */
  email() {
    return (
      <div className="form-group">
        <label forName="exampleInputEmail1">Email address</label>
        <input
          type="email"
          className="form-control"
          id="exampleInputEmail1"
          aria-describedby="emailHelp"
          placeholder="Enter email"
          onChange={this.handleChange}
        >
      </div>
    )
  }
}
````

## Implement a `phone` control
````typescript
class MyFormControl extends CoreFormControl {
  /**
   * Implement phone
   */
  phone() {
    return (
      <div className="form-group">
        <label forName="phone">Your Phone</label>
        <input
          type="tel"
          className="form-control"
          id="phone" aria-describedby="phoneHelp"
          placeholder="Enter your phone"
          onChange={this.handleChange}
        >
      </div>
    )
  }
}
````
  
## Install

```bash
npm install --save @manojadams/metaform-core
```

## Basic usage of the library
```tsx
import MetaformRenderer from "@manojadams/metaforms-core";
import React from "react";
import FormControl from "./forms/FormControl";      // your form control implementation
import FormGroup from "./forms/FormGroup";          // your form group implementation
import { FormStepper } from "./forms/FormStepper";  // your form stepper implementation

class FormRenderer extends React.Component {

  constructor(props: IFormRenderer) {
    super(props);
  }

  render() {
    return (
      <MetaformRenderer 
        {...this.props} 
        baseFormControl={FormControl}
        baseFormGroup={FormGroup}
        baseFormStepper={FormStepper}
      />
    )
  }
}

export default FormRenderer;
```

## License

MIT © [manojadams](https://github.com/manojadams)

---
_Source: https://npm.io/package/@manojadams/metaforms-core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._