0.5.4 • Published 9 months ago
@daohaus/moloch-v3-fields v0.5.4
@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.5.4
9 months ago
0.5.3
10 months ago
0.5.2
1 year ago
0.5.1
1 year ago
0.4.5
1 year ago
0.5.0
1 year ago
0.4.4
1 year ago
0.4.3
1 year ago
0.4.2
1 year ago
0.4.1
1 year ago
0.4.0
1 year ago
0.3.3
2 years ago
0.2.0-alpha.0
2 years ago
0.3.0
2 years ago
0.2.1
2 years ago
0.2.0
2 years ago
0.2.0-alpha.4
2 years ago
0.2.0-alpha.3
2 years ago
0.2.0-alpha.6
2 years ago
0.2.0-alpha.5
2 years ago
0.0.9
2 years ago
0.3.2
2 years ago
0.2.3
2 years ago
0.3.1
2 years ago
0.2.2
2 years ago
0.0.8
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.1
2 years ago