0.5.0 • Published 2 days ago
@daohaus/moloch-v3-fields v0.5.0
@daohaus/moloch-v3-fields
The moloch-v3-fields package is 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.
View on NPM
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!',
};
Building
Run nx run moloch-v3-fields:build
to build the library.
0.4.5
3 days ago
0.5.0
2 days ago
0.4.4
1 month ago
0.4.3
2 months ago
0.4.2
3 months ago
0.4.1
4 months ago
0.4.0
4 months ago
0.3.3
5 months ago
0.2.0-alpha.0
9 months ago
0.3.0
7 months ago
0.2.1
8 months ago
0.2.0
9 months ago
0.2.0-alpha.4
9 months ago
0.2.0-alpha.3
9 months ago
0.2.0-alpha.6
9 months ago
0.2.0-alpha.5
9 months ago
0.0.9
10 months ago
0.3.2
6 months ago
0.2.3
8 months ago
0.3.1
6 months ago
0.2.2
8 months ago
0.0.8
11 months ago
0.0.3
12 months ago
0.0.2
12 months ago
0.0.5
12 months ago
0.0.4
12 months ago
0.0.7
11 months ago
0.0.6
11 months ago
0.0.1
1 year ago