@8base/forms
Advanced tools
Readme
8base Forms is a thin React wrapper for React Final Forms to easy implement forms for 8base API entities.
Extends React.Component
Field wrapper based on Field from the react-final-form. This component accepts FieldProps and other props for easy implementation with the 8base API.
fieldSchema FieldSchema? The 8base API field schema.name string? The name of field, based on the 8base API table schema.Extends React.Component
FieldArray wrapper based on FieldArray from the react-final-form-arrays. It accepts FieldArrayProps as a prop.
Extends React.Component
Fieldset passes relation table schema to the children fields.
tableSchema TableSchema? The 8base API table schema.tableSchemaName string? The name of the 8base API table schema. This prop only works if SchemaContext is provided.Extends React.Component
Form wrapper based on Form from the react-final-form. This component accepts FormProps and other props for easy implementation with the 8base API.
tableSchema TableSchema? The 8base API table schema.tableSchemaName string? The name of the 8base API table schema. This prop only works if SchemaContext is provided.import React from 'react';
import { render } from 'react-dom';
import { Form, Field } from '@8base/forms';
const TABLE_SCHEMA = {
name: 'client',
displayName: 'Client',
isSystem: false,
fields: [{
name: 'firstName',
displayName: 'First Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Vladimir',
relation: null,
}, {
name: 'lastName',
displayName: 'Last Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Putin',
relation: null,
}, {
name: 'age',
displayName: 'Age',
description: null,
fieldType: 'NUMBER',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}],
};
render(
<Form type="CREATE" onSubmit={onSubmit}>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="firstName" component="input" />
<Field name="lastName" component="input" />
<Field name="age" component="input" />
<button type="submit">Create Client</button>
</form>
)
}
</Form>
, document.getElementById('root'));
import React from 'react';
import { render } from 'react-dom';
import { Form, Field, FieldArray } from '@8base/forms';
const TABLE_SCHEMA = {
name: 'client',
displayName: 'Client',
isSystem: false,
fields: [{
name: 'firstName',
displayName: 'First Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Vladimir',
relation: null,
}, {
name: 'lastName',
displayName: 'Last Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Putin',
relation: null,
}, {
name: 'age',
displayName: 'Age',
description: null,
fieldType: 'NUMBER',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}, {
name: 'fieldArray',
displayName: 'FieldArray',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: true,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}],
};
render(
<Form type="CREATE" onSubmit={onSubmit}>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="firstName" component="input" />
<Field name="lastName" component="input" />
<Field name="age" component="input" />
<FieldArray name="fieldArray">
{
React.Children.toArray(({ fields }) => (
<React.Fragment>
{
fields.map((name, index) => (
<React.Fragment>
<Field key={ name } name={ name } component="input" />
<button onClick={ () => fields.remove(index) }>Remove</button>
</React.Fragment>
))
}
<button onClick={ () => fields.push('New Field Array Item') }>Add</button>
</React.Fragment>
))
}
</FieldArray>
<button type="submit">Create Client</button>
</form>
)
}
</Form>
, document.getElementById('root'));
import React from 'react';
import { render } from 'react-dom';
import { Form, Field } from '@8base/forms';
import { TableSchemaProvider } from '@8base/table-schema-provider';
const SCHEMA = [{
name: 'client',
displayName: 'Client',
isSystem: false,
fields: [{
name: 'firstName',
displayName: 'First Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Vladimir',
relation: null,
}, {
name: 'lastName',
displayName: 'Last Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Putin',
relation: null,
}, {
name: 'age',
displayName: 'Age',
description: null,
fieldType: 'NUMBER',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}],
}, {
name: 'order',
displayName: 'Order',
isSystem: false,
fields: [{
name: 'name',
displayName: 'name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}, {
name: 'deliveryDate',
displayName: 'Delivery Date',
description: null,
fieldType: 'DATE',
fieldTypeAttributes: {
format: 'DATE',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}],
}];
render(
<TableSchemaProvider schema={SCHEMA}>
<Form type="CREATE" tableSchemaName="client" onSubmit={ onSubmitClient }>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="firstName" component="input" />
<Field name="lastName" component="input" />
<Field name="age" component="input" />
<button type="submit">Create Client</button>
</form>
)
}
</Form>
<Form type="CREATE" tableSchemaName="order" onSubmit={onSubmitOrder}>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="name" component="input" />
<Field name="deliveryDate" component="input" />
<button type="submit">Create Order</button>
</form>
)
}
</Form>
</TableSchemaProvider>
, document.getElementById('root'));
import React from 'react';
import { render } from 'react-dom';
import { Form, Field } from '@8base/forms';
import { TableSchemaProvider } from '@8base/table-schema-provider';
const SCHEMA = [{
id: 'TABLE_SCHEMA_ID',
name: 'tableSchema',
displayName: 'Table Schema',
isSystem: false,
fields: [
{
name: 'scalar',
displayName: 'Scalar',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: false,
isUnique: false,
defaultValue: 'Scalar Default Value',
relation: null,
},
{
name: 'scalarList',
displayName: 'Scalar List',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: true,
isRequired: false,
isUnique: false,
defaultValue: 'Scalar List Default Value 1',
relation: null,
},
{
name: 'relation',
displayName: 'Relation',
description: null,
fieldType: 'RELATION',
fieldTypeAttributes: null,
isList: false,
isRequired: false,
isUnique: null,
defaultValue: null,
relation: {
id: 'RELATION_FIELD_ID_1',
relationTableName: 'RELATION_TABLE_NAME_1',
relationFieldName: 'aid',
refTable: {
id: 'RELATION_TABLE_SCHEMA_ID',
},
refFieldIsList: false,
refFieldIsRequired: true,
},
},
{
name: 'relationList',
displayName: 'RelationList',
description: null,
fieldType: 'RELATION',
fieldTypeAttributes: null,
isList: true,
isRequired: false,
isUnique: null,
defaultValue: null,
relation: {
id: 'RELATION_FIELD_ID_2',
relationTableName: 'RELATION_TABLE_NAME_2',
relationFieldName: 'aid',
refTable: {
id: 'RELATION_TABLE_SCHEMA_ID',
},
refFieldIsList: false,
refFieldIsRequired: true,
},
},
],
}, {
id: 'RELATION_TABLE_SCHEMA_ID',
name: 'relationTableSchema',
displayName: 'Relation Table Schema',
isSystem: false,
fields: [
{
name: 'scalar',
displayName: 'Scalar',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: false,
isUnique: false,
defaultValue: 'Scalar Default Value',
relation: null,
},
{
name: 'scalarList',
displayName: 'Scalar List',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: true,
isRequired: false,
isUnique: false,
defaultValue: 'Scalar List Default Value 1',
relation: null,
},
{
name: 'relation',
displayName: 'Relation',
description: null,
fieldType: 'RELATION',
fieldTypeAttributes: null,
isList: false,
isRequired: false,
isUnique: null,
defaultValue: null,
relation: {
id: 'RELATION_FIELD_ID_3',
relationTableName: 'RELATION_TABLE_NAME_1',
relationFieldName: 'aid',
refTable: {
id: 'TABLE_SCHEMA_ID',
},
refFieldIsList: false,
refFieldIsRequired: true,
},
},
{
name: 'relationList',
displayName: 'RelationList',
description: null,
fieldType: 'RELATION',
fieldTypeAttributes: null,
isList: true,
isRequired: false,
isUnique: null,
defaultValue: null,
relation: {
id: 'RELATION_FIELD_ID_4',
relationTableName: 'RELATION_TABLE_NAME_2',
relationFieldName: 'aid',
refTable: {
id: 'TABLE_SCHEMA_ID',
},
refFieldIsList: false,
refFieldIsRequired: true,
},
},
],
}];
const INITIAL_VALUES = {
scalar: 'Scalar Value',
scalarList: [
'Scalar List Value',
],
relation: {
scalar: 'Relation Scalar Value',
},
relationList: [{
scalar: 'Relation List Scalar Value',
}],
};
render(
<TableSchemaProvider value={ SCHEMA }>
<Form type="CREATE" tableSchemaName="tableSchema" initialValues={ INITIAL_VALUES } onSubmit={ onSubmitForm }>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="scalar" component="input" />
<FieldArray name="scalarList">
{
({ fields }) => (
fields.map((name) => (
<Field key={ name } name={ name } component="input" />
))
)
}
</FieldArray>
<Fieldset tableSchemaName="relationTableSchema">
<Field name="relation.scalar" component="input" />
</Fieldset>
<FieldArray name="relationList">
{
({ fields }) => (
fields.map((name) => (
<Fieldset key={ name } tableSchemaName="relationTableSchema">
<Field name={ `${name}.scalar` } component="input" />
</Fieldset>
))
)
}
</FieldArray>
</form>
)
}
</Form>
</TableSchemaProvider>
, document.getElementById('root'));
FAQs
8base Forms is a thin React wrapper for React Final Forms to easy implement forms for 8base API entities.
The npm package @8base/forms receives a total of 3 weekly downloads. As such, @8base/forms popularity was classified as not popular.
We found that @8base/forms demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.