# @daohaus/moloch-v3-fields

> The moloch-v3-fields package is a collection of custom field components used by [@daohaus/form-builder](https://github.com/HausDAO/monorepo/tree/develop/libs/form-builder) when rendering forms.

Latest version **0.5.5** (published 2025-03-03) · 0 weekly downloads

## Install

```sh
npm install @daohaus/moloch-v3-fields
pnpm add @daohaus/moloch-v3-fields
yarn add @daohaus/moloch-v3-fields
bun add @daohaus/moloch-v3-fields
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.5.5 |
| Published | 2025-03-03 |
| First published | 2023-02-28 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 26 |
| Unpacked size | 245.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 25 |
| Maintainers | daohaus-protocol |

## Links

- npm: https://www.npmjs.com/package/@daohaus/moloch-v3-fields
- Repository: https://github.com/HausDAO/monorepo
- Homepage: https://github.com/HausDAO/monorepo#readme
- Issues: https://github.com/HausDAO/monorepo/issues
- npm.io page: https://npm.io/package/@daohaus/moloch-v3-fields

## Dependencies (26)

- [uuid](https://npm.io/package/uuid.md) 9.0.0
- [viem](https://npm.io/package/viem.md) 1.6.0
- [react](https://npm.io/package/react.md) 18.2.0
- [ethers](https://npm.io/package/ethers.md) 5.7.2
- [date-fns](https://npm.io/package/date-fns.md) 2.30.0
- [@daohaus/ui](https://npm.io/package/@daohaus/ui.md) 0.5.5
- [react-icons](https://npm.io/package/react-icons.md) 4.10.1
- [@daohaus/abis](https://npm.io/package/@daohaus/abis.md) 0.5.5
- [@daohaus/utils](https://npm.io/package/@daohaus/utils.md) 0.5.5
- [react-markdown](https://npm.io/package/react-markdown.md) 9.0.0
- [react-hook-form](https://npm.io/package/react-hook-form.md) 7.45.4
- [@daohaus/connect](https://npm.io/package/@daohaus/connect.md) 0.5.5
- [react-datepicker](https://npm.io/package/react-datepicker.md) 4.21.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) 6.4.1
- [styled-components](https://npm.io/package/styled-components.md) 6.0.7
- [@ethersproject/abi](https://npm.io/package/@ethersproject/abi.md) 5.7.0
- [@daohaus/tx-builder](https://npm.io/package/@daohaus/tx-builder.md) 0.5.5
- [@walletconnect/core](https://npm.io/package/@walletconnect/core.md) 2.10.0
- [@daohaus/form-builder](https://npm.io/package/@daohaus/form-builder.md) 0.5.5
- [@walletconnect/client](https://npm.io/package/@walletconnect/client.md) 1.8.0
- [@daohaus/keychain-utils](https://npm.io/package/@daohaus/keychain-utils.md) 0.5.5
- [@daohaus/moloch-v3-data](https://npm.io/package/@daohaus/moloch-v3-data.md) 0.5.5
- [@daohaus/moloch-v3-hooks](https://npm.io/package/@daohaus/moloch-v3-hooks.md) 0.5.5
- [@radix-ui/react-checkbox](https://npm.io/package/@radix-ui/react-checkbox.md) 1.0.4
- [@walletconnect/web3wallet](https://npm.io/package/@walletconnect/web3wallet.md) 1.9.0
- [@walletconnect/legacy-types](https://npm.io/package/@walletconnect/legacy-types.md) 2.0.0

## Recent versions

- 0.5.5 (latest) — 2025-03-03
- 0.2.0-alpha.6 (alpha) — 2023-08-18
- 0.5.4 — 2024-10-29
- 0.5.3 — 2024-09-06
- 0.5.2 — 2024-06-14
- 0.5.1 — 2024-05-09
- 0.5.0 — 2024-05-03
- 0.4.5 — 2024-05-02
- 0.4.4 — 2024-03-29
- 0.4.3 — 2024-03-21
- 0.4.2 — 2024-01-26
- 0.4.1 — 2024-01-18
- 0.4.0 — 2024-01-17
- 0.3.3 — 2023-12-19
- 0.3.2 — 2023-11-10
- … 19 more at https://npm.io/package/@daohaus/moloch-v3-fields/versions

## README

# @daohaus/moloch-v3-fields

The moloch-v3-fields package is a collection of custom field components used by [@daohaus/form-builder](https://github.com/HausDAO/monorepo/tree/develop/libs/form-builder) when rendering forms.

These fields include some complex functionality above and beyond the basic fields in the [@daohaus/ui](https://github.com/HausDAO/monorepo/tree/develop/libs/ui) package.

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

## Usage

### Installation

```bash
yarn add @daohaus/moloch-v3-fields
```

### Examples

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

1. Create a new field component

```jsx
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.

```ts
// 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

```jsx
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

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

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

## Building

Run `nx run moloch-v3-fields:build` to build the library.

---
_Source: https://npm.io/package/@daohaus/moloch-v3-fields · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._