@daohaus/moloch-v3-fields

Moloch v3 Fields provides a collection of custom field components used by @daohaus/form-builder when rendering forms.

These fields include some complex functionality above and beyond the basic fields in the @daohaus/ui package.

Github (opens in a new tab)

*Used for registering custom fields in Form Builder.

NPM (opens in a new tab)

Usage

Installation

yarn add @daohaus/moloch-v3-fields

Examples

How to create and add a custom field to your application

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>
  );
};

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>;

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}
    />
  );
};

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!',
};

Form Legos Component Library