# @daohaus/moloch-v3-fields

The moloch-v3-fields package is a collection of custom field components used by [@daohaus/form-builder](https://hackmd.io/@bootleggers/Skfd50_w3/https%3A%2F%2Fhackmd.io%2F%40bootleggers%2FHyPeygYDn) when rendering forms.

These fields include some complex functionality above and beyond the basic fields in the [@daohaus/ui](https://hackmd.io/@bootleggers/Skfd50_w3/https%3A%2F%2Fhackmd.io%2F%40bootleggers%2FBkS_0JtDn) package.

### [View on Github](https://github.com/HausDAO/monorepo/tree/develop/libs/moloch-v3-fields)

- [**Field Components**](https://hackmd.io/@bootleggers/Skfd50_w3/https%3A%2F%2Fhackmd.io%2F%40bootleggers%2FBkS_0JtDn)
- [**Field config used for registering custom fields in Form Builder**](https://github.com/HausDAO/monorepo/blob/develop/libs/moloch-v3-fields/src/config/fieldConfig.ts)

### [View on NPM](https://www.npmjs.com/package/@daohaus/moloch-v3-fields)

## Usage

### Installation

yarn add @daohaus/moloch-v3-fields

### Examples

**How to create and add a custom field to your application**

1. Create a new field component

import React from "react";
import { Buildable, WrappedInput, Field } from "@daohaus/ui";

export const TestField = (props: Buildable<Field>) => {
  return (
    <div>
      <WrappedInput {...props} />
      <p>I am some strange new field with a line of text below it!!</p>
    </div>

  );
};

2. Add a fieldConfig.ts file to create a new list of available fields and add your custom field to that.

// fieldConfig.ts
import { MolochFields } from "@daohaus/moloch-v3-fields";
import { FieldLegoBase, FormLegoBase } from "@daohaus/utils";
import { TestField } from "..fieldTest";

export const AppFieldLookup = {
  ...MolochFields,
  strangeField: TestField,
};

export type CustomFieldLego = FieldLegoBase<typeof AppFieldLookup>;
export type CustomFormLego = FormLegoBase<typeof AppFieldLookup>;

3. Pass the new field lookup to the Form Builder component

import { FormBuilder } from "@daohaus/form-builder";
import { MolochFields } from "@daohaus/moloch-v3-fields";


import { AppFieldLookup } from "./fieldConfig";

export const FormTest = () => {
  return (
    <FormBuilder
<!--       ...other props -->
      customFields={AppFieldLookup}
    />
  );
};

4. Use in a field lego with the new type

import { MolochFieldLego } from '@daohaus/moloch-v3-fields';

 const StrangeFieldLego:MolochFieldLego = {
  id: 'anyId',
  type: 'strangeField',
  label: 'Whaaa???',
  placeholder: 'Enter something!',
},