# @ekoneko/form-maker

> A react drag and drop form maker

Latest version **1.0.0** (published 2019-04-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ekoneko/form-maker
pnpm add @ekoneko/form-maker
yarn add @ekoneko/form-maker
bun add @ekoneko/form-maker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-04-16 |
| First published | 2019-04-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 19.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ekoneko |

## Links

- npm: https://www.npmjs.com/package/@ekoneko/form-maker
- npm.io page: https://npm.io/package/@ekoneko/form-maker

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^15.6.1
- [react-dnd](https://npm.io/package/react-dnd.md) ^2.4.0
- [react-dom](https://npm.io/package/react-dom.md) ^15.6.1
- [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) ^2.4.1

## Recent versions

- 1.0.0 (latest) — 2019-04-16

## README

A react drag and drop form maker

simple demo: [http://ekoneko.github.io/form-maker](http://ekoneko.github.io/form-maker)

## how to use

This is a [sample](https://github.com/ekoneko/form-maker-demo/blob/master/src/index.tsx).

```
import {FormMaker, ProtoBench, WorkBench, EditBench} from 'form-maker'

<FormMaker>
  <ProtoBench
    protoList={formFields}
    style={}
  />
  <WorkBench
    onChange={this.handleChange}
    style={}
  />
  <EditBench style={} />
</FormMaker>
```

### ProtoBench

`ProtoBench` is a area to display all fields which can drop to workbench.

#### formFields

`formFields` support to `ProtoBench`'s `protoList` prop. It use to define field scheme.

The struct about `formField` like this [sample](https://github.com/ekoneko/form-maker-demo/blob/master/src/components/FormFIelds/Input/index.tsx)

```
{
  type: 'input',
  params: {
    title: 'Input',
    placeholder: '',
    multiple: false,
  },
  renderProto: () => {
    return <ProtoItem />
  },
  renderWork: (params) => {
    return <WorkItem params={params} />
  },
  renderEditParam: (params, onChange) => {
    return <EditParam params={params} onChange={onChange} />
  },
}
```

1. `type`: the field's type. It's a string whatever you like, but must be unique.
2. `params`: the field's default props.
3. `renderProto`: A function return what to display on protoBench.
4. `renderWork`: A function return what to display on workBench. It gets params argument
5. `renderEditParam`: A function return what to display on EditBench. It gets params, and a `onChange` function to update the field's custom params.

### WorkBench

`WorkBench` is a area to create and design your form.

You can drag fields from protoBench and drop here, and sort them.

#### onChange

Everytime workBench get a new field or sort or edit field's params, it will trigger a onChange function.

It will return a array like [{type, params}, ...].

### EditBench

`EditBench` is a area to edit field(in workBench)'s params. It don't have any params.

### FormMaker

`FormMaker` component must wrap `ProtoBench`, `WorkBench` and `EditBench`. It supports context to each bench.

Btw, you can also wrap benchs in some layout components like below. Just ensure every benches are wrapped by `FormMaker`.

```
<FormMaker>
  <div class="xxx">
    <ProtoBench>
  </div>
  ...
```

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