Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@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" tableSchema={TABLE_SCHEMA} 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" tableSchema={TABLE_SCHEMA} 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 1 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.