A React library for rendering out forms based on the Form.io platform.
To see an example application of how to implement all the components and modules in this library, see https://github.com/formio/react-app-starterkit
npm install @formio/react --save
npm install @formio/js --save
yarn add @formio/react @formio/js
A hook to supply global Formio contextual values to your React components. Components that call useFormioContext
must be children of a <FormioProvider />
component.
useFormioContext
returns an object with the following parameters:
Name | Type | Description |
---|---|---|
Formio | typeof Formio | The global Formio object. Useful for various static methods as well as SDK functions that are exposed when the new operator is used. |
baseUrl | string | The base url for a Form.io server. |
projectUrl | string | The base url for a Form.io enterprise project. |
logout | () => void | A convenience method to logout of a Form.io session by invalidating the token and removing it from local storage. |
token | string | The Form.io JWT-token (if the user is authenticated). |
isAuthenticated | boolean | A convenience value that is toggled when logging in or out of a Form.io session. |
Use the authentication context provided by useFormioContext
to evaluate the Form.io authentication of a user:
import { createRoot } from 'react-dom/client';
import { useFormioContext, FormGrid, FormioProvider } from '@formio/react';
const App = () => {
const { isAuthenticated } = useFormioContext();
return isAuthenticated ? (
<Router>
<Route path="/form">
<FormGrid
formQuery={{ type: 'form' }}
onFormClick={(id) => setLocation(`/form/${id}`)}
/>
</Route>
<Route path="/resource">
<FormGrid
formQuery={{ type: 'resource' }}
onFormClick={(id) => setLocation(`/resource/${id}`)}
/>
</Route>
</Router>
) : (
<Redirect to="/login" />
);
};
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
<FormioProvider projectUrl="https://examples.form.io">
<App />
</FormioProvider>,
);
Use the Form.io SDK to interact with a Form.io server:
import { createRoot } from 'react-dom/client';
import { useEffect, useState } from 'react';
import {
useFormioContext,
FormioProvider,
FormType,
Form,
} from '@formio/react';
const FormsByUser = ({ userId }: { userId: string }) => {
const { Formio, projectUrl } = useFormioContext();
const [forms, setForms] = useState<FormType[]>([]);
useEffect(() => {
const fetchForms = async () => {
const formio = new Formio(projectUrl);
try {
const forms = await formio.loadForms({
params: { type: 'form', owner: userId },
});
setForms(forms);
} catch (err) {
console.log(
`Error while loading forms for user ${userId}:`,
err,
);
}
};
fetchForms();
}, [Formio, projectUrl, userId]);
return forms.map(function (form) {
return (
<>
<Form src={form} />
<div style={{ marginBottom: '10px' }} />
</>
);
});
};
const domNode = document.getElementById('root');
const root = createRoot(domNode);
const root = createRoot();
root.render(
<FormioProvider projectUrl="https://examples.form.io">
<App />
</FormioProvider>,
);
A hook to supply limit/skip server pagination data and methods to your React components. Components that call usePagination
must be children of a <FormioProvider />
component.
Name | Type | Description |
---|---|---|
initialPage | number | The initial page to fetch. |
limit | string | The number of results per page. |
dataOrFetchFunction | T[] | (limit: number, skip: number) => Promise<T[]> | Either the complete set of data to be paginated or a function that returns data. If a function, must support limit and skip and be a stable reference. |
usePagination
returns an object with the following parameters:
Name | Type | Description |
---|---|---|
data | T[] | The data at the current page. |
total | number | undefined | If available, the total number of documents. |
page | number | The current page number. |
hasMore | boolean | A value that indicates whether more results are available from the server. Useful when no total document count is available. |
nextPage | () => void | A function that moves the data to the next available page. |
prevPage | () => void | A function that moves the data to the previous available page. |
fetchPage | (page: number) => void | A function that moves the data to a specified page. |
Paginate a set of forms:
import { createRoot } from 'react-dom/client';
import { useCallback } from 'react';
import {
useFormioContext,
FormioProvider,
FormType,
Form,
} from '@formio/react';
const FormsByUser = ({ userId }: { userId: string }) => {
const { Formio, projectUrl } = useFormioContext();
const fetchFunction = useCallback(
(limit: number, skip: number) => {
const formio = new Formio(`${projectUrl}/form`);
return formio.loadForms({ params: { type: 'form', limit, skip } });
},
[Formio, projectUrl],
);
const { data, page, nextPage, prevPage, hasMore } = usePagination<FormType>(
1,
10,
fetchFunction,
);
return (
<div>
<div>
{data.map((form) => (
<>
<Form src={form} />
<div style={{ marginBottom: '10px' }} />
</>
))}
</div>
<ul>
<li
onClick={prevPage}
className={`${page === 1 ? 'disabled' : ''}`}
>
Prev
</li>
<li
onClick={nextPage}
className={`${hasMore ? '' : 'disabled'}`}
>
Next
</li>
</ul>
</div>
);
};
const domNode = document.getElementById('root');
const root = createRoot(domNode);
const root = createRoot();
root.render(
<FormioProvider projectUrl="https://examples.form.io">
<App />
</FormioProvider>,
);
A React context provider component that is required when using some hooks and components from this library.
Name | Type | Description |
---|---|---|
baseUrl | string | The base url of a Form.io server. |
projectUrl | string | The url of a Form.io enterprise project. |
A React component wrapper around a Form.io form. Able to take a JSON form definition or a Form.io form URL and render the form in your React application.
Name | Type | Default | Description |
---|---|---|---|
src |
Webform | string |
The JSON form definition or the source URL. If a URL, commonly from a form.io server. | |
url |
string |
The url of the form definition. Used in conjunction with a JSON form definition passed to src , this is used for file upload, OAuth, and other components or actions that need to know the URL of the Form.io form for further processing. The form will not be loaded from this url and the submission will not be saved here either. |
|
submission |
JSON |
Submission data to fill the form. You can either load a previous submission or create a submission with some pre-filled data. If you do not provide a submissions the form will initialize an empty submission using default values from the form. | |
options |
FormOptions |
The form options. See here for more details. | |
onFormReady |
(instance: Webform) => void |
A callback function that gets called when the form has rendered. It is useful for accessing the underlying @formio/js Webform instance. | |
onSubmit |
(submission: JSON, saved?: boolean) => void |
A callback function that gets called when the submission has started. If src is not a Form.io server URL, this will be the final submit event. |
|
onCancelSubmit |
() => void |
A callback function that gets called when the submission has been canceled. | |
onSubmitDone |
(submission: JSON) => void |
A callback function that gets called when the submission has successfully been made to the server. This will only fire if src is set to a Form.io server URL. |
|
onChange |
(value: any, flags: any, modified: any) => void |
A callback function that gets called when a value in the submission has changed. | |
onComponentChange |
(changed: { instance: Webform; component: Component; value: any; flags: any}) => void |
A callback function that gets called when a specific component changes. | |
onError |
(error: EventError | false) => void |
A callback function that gets called when an error occurs during submission (e.g. a validation error). | |
onRender |
(param: any) => void |
A callback function that gets called when the form is finished rendering. param will depend on the form and display type. |
|
onCustomEvent |
(event: { type: string; component: Component; data: JSON; event?: Event; }) => void |
A callback function that is triggered from a button component configured with "Event" type. | |
onPrevPage |
(page: number, submission: JSON) => void |
A callback function for Wizard forms that gets called when the "Previous" button is pressed. | |
onNextPage |
(page: number, submission: JSON) => void |
A callback function for Wizard forms that gets called when the "Next" button is pressed. | |
otherEvents |
[event: string]: (...args: any[]) => void; |
A "catch-all" prop for subscribing to other events (for a complete list, see our documentation). |
Render a simple form from the Form.io SaaS:
import { createRoot } from 'react-dom/client';
import { Form } from '@formio/react';
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
<Form src="https://example.form.io/example" onSubmit={console.log} />,
);
Render a simple form from a JSON form definition:
import { createRoot } from 'react-dom/client';
import { Form } from '@formio/react';
const domNode = document.getElementById('root');
const root = createRoot(domNode);
const formDefinition = {
type: "form",
display: "form",
components: [
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "button",
key: "submit",
label: "Submit",
input: true
}
]
}
root.render(<Form src={formDefinition} />);
Access the underlying form instance (see here for details):
import { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { Form } from '@formio/react';
const domNode = document.getElementById('root');
const root = createRoot(domNode);
const formDefinition = {
type: "form",
display: "form",
components: [
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "button",
key: "submit",
label: "Submit",
input: true
}
]
}
const App = () => {
const formInstance = useRef(null);
const handleFormReady = (instance) => {
formInstance.current = instance;
}
const handleClick = () => {
if (!formInstance.current) {
console.log("Our form isn't quite ready yet.");
return;
}
formInstance.current.getComponent('firstName')?.setValue('John');
formInstance.current.getComponent('lastName')?.setValue('Smith');
}
return (
<div>
<Form src={formDefinition} onFormReady={handleFormReady} />
<button type="button" onClick={handleClick}>Set Names</button>
</div>
);
}
root.render(<App />);
A number of dependencies in the @formio/js
rely on web APIs and browser-specific globals like window
. Because Next.js includes a server-side rendering stage, this makes it difficult to import the Form component directly, even when used in client components. For this reason, we recommend dynamically importing the Form component using Next.js' dynamic
API:
'use client';
import dynamic from 'next/dynamic';
import { Webform } from '@formio/js';
const Form = dynamic(
() => import('@formio/react').then((module) => module.Form),
{ ssr: false },
);
export default function Home() {
const formInstance = useRef<Webform | null>(null);
const handleClick = () => {
if (!formInstance.current) {
console.log("Our form isn't quite ready yet.");
return;
}
formInstance.current.getComponent('firstName')?.setValue('John');
formInstance.current.getComponent('lastName')?.setValue('Smith');
};
return (
<main className={styles.main}>
<Form
form="https://examples.form.io/example"
onFormReady={(instance) => {
formInstance.current = instance;
}}
/>
<button onClick={handleClick}>Set Names</button>
</main>
);
}
A React component wrapper around a Form.io form builder. Able to render the form builder in your React application.
Name | Type | Default | Description |
---|---|---|---|
initialForm |
FormType |
The JSON form definition of the initial form to be rendered in the builder. Oftentimes, this must be a stable reference; otherwise it may destroy and recreate the underlying builder instance and cause unexpected behavior. | |
options |
FormBuilderOptions |
The form builder options. See here for more details. | |
onBuilderReady |
(instance: FormBuilder) => void |
A callback function that gets called when the form builder has rendered. It is useful for accessing the underlying @formio/js FormBuilder instance. | |
onChange |
(form: FormType) => void |
A callback function that gets called when the form being built has changed. | |
onSaveComponent |
(component: Component, original: Component, parent: Component, path: string, index: number, isNew: boolean, originalComponentSchema: Component) => void; |
A callback function that gets called when a component is saved in the builder. | |
onEditComponent |
(component: Component) => void |
A callback function that gets called when a component is edited. | |
onUpdateComponent |
(component: Component) => void |
A callback function that is called when a component is updated. | |
onDeleteComponent |
(component: Component, parent: Component, path: string, index: number) => void |
A callback function that is called when a component is deleted. |
Render a simple form builder with a blank form:
import { createRoot } from 'react-dom/client';
import { FormBuilder } from '@formio/react';
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
<FormBuilder />,
);
Render a builder with an initial form definition:
import { createRoot } from 'react-dom/client';
import { FormBuilder } from '@formio/react';
const domNode = document.getElementById('root');
const root = createRoot(domNode);
const formDefinition = {
display: "form",
components: [
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "button",
key: "submit",
label: "Submit",
input: true
}
]
}
root.render(<FormBuilder form={formDefinition} />);
Access the underlying form builder instance (see here for details):
import { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { FormBuilder } from '@formio/react';
const domNode = document.getElementById('root');
const root = createRoot(domNode);
const formDefinition = {
display: "form",
components: [
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "textfield"
key: "firstName",
label: "First Name",
input: true,
},
{
type: "button",
key: "submit",
label: "Submit",
input: true
}
]
}
const App = () => {
const formBuilderInstance = useRef(null);
const handleFormReady = (instance) => {
formBuilderInstance.current = instance;
}
const handleClick = () => {
if (!formBuilderInstance.current) {
console.log("Our form isn't quite ready yet.");
return;
}
console.log("Here's our builder instance:", formBuilderInstance.current);
}
return (
<div>
<Form src={formDefinition} onFormReady={handleFormReady} />
<button type="button" onClick={handleClick}>Log Our Builder</button>
</div>
);
}
root.render(<App />);
The FormEdit component wraps the FormBuilder component and adds a settings form, enabling direct interaction with forms to and from a Form.io server. The FormEdit
component must be a child of a <FormioProvider />
component.
Name | Type | Default | Description |
---|---|---|---|
initialForm |
FormType |
{ title: '', name: '', path: '', display: 'form' as const, type: 'form' as const, components: [] } |
The form definition of the existing form that is to be modified. |
settingsForm |
FormType |
DEFAULT_SETTINGS_FORM |
The form definition for the "settings" form, which defaults to a form that defines the title, name, path, tags, and display of the form being edited. |
settingsFormOptions |
FormOptions |
{} |
The options passed to the settings form. |
onSettingsFormReady |
(instance: Webform) => void |
The onFormReady callback for the settings form. |
|
onBuilderReady |
(instance: FormioBuilder) => void |
The onBuilderReady callback for the form builder. |
|
builderOptions |
FormBuilderOptions |
{} |
The options to be passed to FormBuilder. |
saveFormFn |
(form: FormType) => Promise<CoreFormType> |
Defaults to using the Form.io SDK to save the form to a Form.io server configured by <FormioProvider /> . |
|
onSaveForm |
(form: FormType) => void |
The callback that is called after saveFormFn is called (either the prop or the default). An optional function that replaces the default behavior of saving the form to a Form.io server. |
FormEdit
takes a components
prop that contains each "element" of the FormEdit
component, allowing you to inject your own markup and styling. Here is its type:
type ComponentProp<T = object> = (props: T) => JSX.Element;
type Components = {
Container?: ComponentProp<{ children: ReactNode }>;
SettingsFormContainer?: ComponentProp<{ children: ReactNode }>;
BuilderContainer?: ComponentProp<{ children: ReactNode }>;
SaveButtonContainer?: ComponentProp<{ children: ReactNode }>;
SaveButton?: ComponentProp<{
onClick: () => void;
}>;
};
Load a simple FormEdit
component that loads a form from a Form.io server:
import { createRoot } from 'react-dom/client';
import { useState, useEffect } from 'react';
import {
FormGrid,
FormioProvider,
useFormioContext,
FormType,
} from '@formio/react';
const App = () => {
const { Formio, projectUrl } = useFormioContext();
const [form, setForm] = useState<FormType | undefined>();
useEffect(() => {
const fetchForm = async () => {
try {
const formio = new Formio(`${projectUrl}/example`);
const form = await formio.loadForm();
setForm(form);
} catch (err) {
console.log('Error while fetching form:', err);
}
};
}, [Formio, projectUrl]);
return form ? (
<FormEdit
initialForm={form}
onSaveForm={() => console.log('Form saved to my Form.io server!')}
/>
) : null;
};
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
<FormioProvider projectUrl="https://examples.form.io">
<App />
</FormioProvider>,
);
Inject your own markup and styling into constituent components:
import { createRoot } from 'react-dom/client';
import { useState, useEffect } from 'react';
import {
FormEdit,
FormioProvider,
useFormioContext,
FormType,
} from '@formio/react';
const App = ({ name }: { name: string }) => {
const { Formio, projectUrl } = useFormioContext();
const [form, setForm] = useState<FormType | undefined>();
useEffect(() => {
const fetchForm = async () => {
try {
const formio = new Formio(`${projectUrl}/example`);
const form = await formio.loadForm();
setForm(form);
} catch (err) {
console.log('Error while fetching form:', err);
}
};
}, [Formio, projectUrl]);
return form ? (
<FormEdit
initialForm={form}
onSaveForm={() => console.log('Form saved to my Form.io server!')}
components={{
SaveButtonContainer: ({ children }) => (
<div
className="save-form-bar button-wrap"
style={{ justifyContent: 'end' }}
>
{children}
</div>
),
SaveButton: ({ onClick }) => (
<button className="button save-form" onClick={onClick}>
Save {name}
</button>
),
}}
/>
) : null;
};
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
<FormioProvider projectUrl="https://examples.form.io">
<App name="Form" />
</FormioProvider>,
);
The FormGrid component can be used to render a list of forms with a set of actions on each row. The FormGrid
component must be a child of a <FormioProvider />
component.
Name | Type | Default | Description |
---|---|---|---|
actions |
Action[] |
DEFAULT_ACTIONS |
An array of actions that correspond to buttons on each form grid row. Defaults to an Edit action (which will call the onFormClick function prop) and a Delete action (which will use the Form.io SDK to soft delete the form). |
forms |
FormType[] |
If you'd like to manage fetching yourself, you can pass an array of forms to FormGrid . |
|
formQuery |
Record<string, JSON> |
{} |
If you don't pass the forms prop, FormGrid will use the Form.io SDK to fetch forms based on the formQuery prop. |
onFormClick |
(id: string) => void |
A callback function called when the FormNameContainer is clicked. |
|
limit |
number |
10 |
The page size limit used by usePagination . |
components |
Record<string, ComponentProp<T>> |
{} |
The list of styleable components. See Styling for details. |
FormGrid
takes a components
prop that contains each "element" of the FormGrid
component, allowing you to inject your own markup and styling. Here is its type:
type ComponentProp<T = object> = (props: T) => JSX.Element;
type Components = {
Container?: ComponentProp<{ children: ReactNode }>;
FormContainer?: ComponentProp<{ children: ReactNode }>;
FormNameContainer?: ComponentProp<{
children: ReactNode;
onClick?: () => void;
}>;
FormActionsContainer?: ComponentProp<{ children: ReactNode }>;
FormActionButton?: ComponentProp<{
action: Action;
onClick: () => void;
}>;
PaginationContainer?: ComponentProp<{ children: ReactNode }>;
PaginationButton?: ComponentProp<{
children: ReactNode;
isActive?: boolean;
disabled?: boolean;
onClick: () => void;
}>;
};
Load a simple form grid that fetchs forms from a Form.io server (configured via the <FormioProvider />
component):
import { createRoot } from 'react-dom/client';
import { FormGrid, FormioProvider } from '@formio/react';
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
<FormioProvider projectUrl="https://examples.form.io">
<FormGrid formQuery={{ type: 'form' }} />
</FormioProvider>,
);
Inject your own markup and styling into constituent components:
import { FormGridProps, FormGrid } from '@formio/react';
import { createRoot } from 'react-dom/client';
const Container: FormGridComponentProps['Container'] = ({ children }) => (
<div className="panel">{children}</div>
);
const FormContainer: FormGridComponentProps['FormContainer'] = ({
children,
}) => (
<div className={`item-wrap form`}>
<button className="item">{children}</button>
</div>
);
const FormNameContainer: FormGridComponentProps['FormNameContainer'] = ({
children,
onClick,
}) => {
return (
<div className="item-title" onClick={onClick}>
<img src={`icon-form.svg`} alt={`${type} icon`} />
{children}
</div>
);
};
const FormActionsContainer: FormGridComponentProps['FormActionsContainer'] = ({
children,
}) => <div className="item-buttons">{children}</div>;
const FormActionButton: FormGridComponentProps['FormActionButton'] = ({
action,
onClick,
}) => (
<a
className={`btn ${action && action.name === 'Edit' ? 'edit' : 'trash'}`}
onClick={onClick}
>
<i
className={`${action && action.name === 'Edit' ? 'ri-edit-box-line' : 'ri-delete-bin-line'}`}
></i> {action && action.name === 'Edit' ? 'Edit' : ''}
</a>
);
const PaginationContainer: FormGridComponentProps['PaginationContainer'] = ({
children,
}) => <div className="pagination-buttons">{children}</div>;
const PaginationButton: FormGridComponentProps['PaginationButton'] = ({
isActive,
disabled,
children,
onClick,
}) => (
<a
className={`pagination-btn${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
onClick={onClick}
>
{children}
</a>
);
export const MyFormGrid = () => {
return (
<FormGrid
formQuery={{ type: 'form' }}
onFormClick={(id) => console.log(`Form with id ${id} clicked!`)}
components={{
Container,
FormContainer,
FormNameContainer,
FormActionsContainer,
FormActionButton,
PaginationContainer,
PaginationButton,
}}
/>
);
};
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
<FormioProvider projectUrl="https://examples.form.io">
<MyFormGrid />
</FormioProvider>,
);
The SubmissionGrid component can be used to render a list of forms with a set of actions on each row. The SubmissionGrid
component must be a child of a <FormioProvider />
component.
Name | Type | Default | Description |
---|---|---|---|
submissions |
Submission[] |
If you'd like to manage fetching yourself, you can pass an array of submissions to SubmissionGrid . |
|
formId |
string |
The id of the form whose submissions SubmissionGrid will fetch if the submissions prop is not provided. |
|
submissionQuery |
Record<string, JSON> |
{} |
If you don't pass the submissions prop, SubmissionsGrid will use the Form.io SDK to fetch forms based on the submissionQuery prop. |
onSubmissionClick |
(id: string) => void |
A callback function called when the TableBodyRowContainer constituent component is clicked. |
|
limit |
number |
10 |
The page size limit used by usePagination . |
components |
Record<string, ComponentProp<T>> |
{} |
The list of styleable components. See Styling for details. |
SubmissionGrid
takes a components
prop that contains each constituent "element" of the SubmissionGrid
component, allowing you to inject your own markup and styling. Here is its type:
type ComponentProp<T = object> = (props: T) => JSX.Element;
type Components = {
Container?: ComponentProp<{ children: ReactNode }>;
TableContainer?: ComponentProp<{ children: ReactNode }>;
TableHeadContainer?: ComponentProp<{ children: ReactNode }>;
TableHeadCell?: ComponentProp<{ children: ReactNode }>;
TableBodyRowContainer?: ComponentProp<{
children: ReactNode;
onClick?: () => void;
}>;
TableHeaderRowContainer?: ComponentProp<{ children: ReactNode }>;
TableBodyContainer?: ComponentProp<{ children: ReactNode }>;
TableCell?: ComponentProp<{ children: ReactNode }>;
PaginationContainer?: ComponentProp<{ children: ReactNode }>;
PaginationButton?: ComponentProp<{
children: ReactNode;
isActive?: boolean;
disabled?: boolean;
onClick: () => void;
}>;
};
Load a simple submission grid that fetchs forms from a Form.io server (configured via the <FormioProvider />
component):
import { createRoot } from 'react-dom/client';
import { SubmissionGrid, FormioProvider } from '@formio/react';
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
<FormioProvider projectUrl="https://examples.form.io">
<SubmissionGrid formId="57aa1d2a5b7a477b002717fe" />
</FormioProvider>,
);
Inject your own markup and styling into constituent components:
import { SubmissionGridProps, SubmissionGrid } from '@formio/react';
import { createRoot } from 'react-dom/client';
const components: SubmissionTableProps['components'] = {
Container: ({ children }) => <div className="table-wrap">{children}</div>,
TableContainer: ({ children }) => (
<div className="table remember-focus-table">{children}</div>
),
TableHeadContainer: ({ children }) => <div>{children}</div>,
TableHeaderRowContainer: ({ children }) => (
<div className="trow heading">{children}</div>
),
TableHeadCell: ({ children }) => <div className="tcol">{children}</div>,
TableBodyRowContainer: ({ children, onClick }) => (
<div className="trow entry" onClick={onClick}>
{children}
</div>
),
TableBodyContainer: ({ children }) => <div>{children}</div>,
TableCell: ({ children }) => <div className="tcol">{children}</div>,
PaginationContainer: ({ children }) => (
<div className="table-pagination">
<div className="table-pagination-controls">{children}</div>
</div>
),
PaginationButton: ({ children, isActive, onClick, disabled }) => (
<a
className={`pagination-btn${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
onClick={onClick}
>
{children}
</a>
),
};
export const MySubmissionGrid = ({ id }: { id: string }) => {
return (
<SubmissionGrid
onSubmissionClick={(id) =>
console.log(`Submission with id ${id} clicked!`)
}
components={components}
formId={id}
/>
);
};
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
<FormioProvider projectUrl="https://examples.form.io">
<MySubmissionGrid id="57aa1d2a5b7a477b002717fe" />
</FormioProvider>,
);
Modules contain Redux actions, reducers, constants and selectors to simplify the API requests made for form.io forms. Reducers, actions and selectors all have names. This provides namespaces so the same actions and reducers can be re-used within the same redux state.
The root module is the container for things shared by other modules such as the selectRoot selector.
Name | Parameters | Description |
---|---|---|
selectRoot |
name: string, state: object | Returns the state for a namespace. |
selectError |
name: string, state: object | Returns any errors for a namespace. |
selectIsActive |
name: string, state: object | Returns isActive state for a namespace. |
The auth module is designed to make it easier to login, register and authenticate users within react using the form.io login system.
Name | Parameters | Description |
---|---|---|
auth |
config: object | Mounts the user and access information to the state tree. Config is not currently used but is a placeholder to make it consistent to the other reducers. |
Name | Parameters | Description |
---|---|---|
initAuth |
This is usually used at the start of an app code. It will check the localStorage for an existing user token and if found, log them in and fetch the needed information about the user. | |
setUser |
user: object | When a user logs in, this will set the user and fetch the access information for that user. The user object is usually a submission from the login or register form. |
logout |
This action will reset everything to the default state, including removing any localStorage information. |
The form module is for interacting with a single form.
Name | Parameters | Description |
---|---|---|
form |
config: object | Mounts the form to the state tree. The config object should contain a name property defining a unique name for the redux state. |
Name | Parameters | Description |
---|---|---|
getForm |
name: string, id: string, done: function | Fetch a form from the server. If no id is provided, the name is used as the path. The done callback will be called when the action is complete. The first parameter is any errors and the second is the form definition. |
saveForm |
name: string, form: object, done: function | Save a form to the server. It will use the _id property on the form to save it if it exists. Otherwise it will create a new form. The done callback will be called when the action is complete. The first parameter is any errors and the second is the form definition. |
deleteForm |
name: string, id: string, done: function | Delete the form on the server with the id. |
resetForm |
Reset this reducer back to its initial state. This is automatically called after delete but can be called other times as well. |
Name | Parameters | Description |
---|---|---|
selectForm |
name: string, state: object | Select the form definition from the state. |
The forms module handles multiple forms like a list of forms.
Name | Parameters | Description |
---|---|---|
forms |
config: object | Mounts the forms to the state tree. The config object should contain a name property defining a unique name for the redux state. The config object can also contain a query property which is added to all requests for forms. For example: {tags: 'common'} would limit the lists of forms to only forms tagged with 'common'. |
Name | Parameters | Description |
---|---|---|
getForms |
name: string, page: integer, params: object | Fetch a list of forms from the server. params is a query object to filter the forms. |
resetForms |
Reset this reducer back to its initial state. This is automatically called after delete but can be called other times as well. |
Name | Parameters | Description |
---|---|---|
selectForms |
name: string, state: object | Select the list of forms from the state. |
The submission module is for interacting with a single submission.
Name | Parameters | Description |
---|---|---|
submission |
config: object | Mounts the submission to the state tree. The config object should contain a name property defining a unique name for the redux state. |
Name | Parameters | Description |
---|---|---|
getSubmission |
name: string, id: string, formId: string, done: function | Fetch a submission from the server. The done callback will be called when the action is complete. The first parameter is any errors and the second is the submission. |
saveSubmission |
name: string, submission: object, formId: string, done: function | Save a submission to the server. It will use the _id property on the submission to save it if it exists. Otherwise it will create a new submission. The done callback will be called when the action is complete. The first parameter is any errors and the second is the submission. |
deleteSubmission |
name: string, id: string, formId: string, done: function | Delete the submission on the server with the id. |
resetSubmission |
Reset this reducer back to its initial state. This is automatically called after delete but can be called other times as well. |
Name | Parameters | Description |
---|---|---|
selectSubmission |
name: string, state: object | Select the submission data from the state. |
The submissions module handles multiple submissions within a form, like for a list of submissions.
Name | Parameters | Description |
---|---|---|
submissions |
config: object | Mounts the submissions to the state tree. The config object should contain a name property defining a unique name for the redux state. |
Name | Parameters | Description |
---|---|---|
getSubmissions |
name: string, page: integer, params: object, formId: string | Fetch a list of submissions from the server. params is a query object to filter the submissions. |
resetSubmissions |
Reset this reducer back to its initial state. This is automatically called after delete but can be called other times as well. |
Name | Parameters | Description |
---|---|---|
selectSubmissions |
name: string, state: object | Select the list of submissions from the state. |
Released under the MIT License.
react's People
Forkers
kenifranz aneeskhan batusai513 crimson-education sandy987 ctrldavid jazizi joxertmd codefork deshion amdirent laakarihinta demonrem maheshsundaramurthy harrowm tliber globoint karelchudej bionicvapourboy johncrisostomo gminovska trendingtechnology webawesomedev fdidron miguelguadarrama hfye aum1031 breezeworks caiming-growing lzghost dharith pkunchamwar abatish sah27513 joshuaalewis davidlni suresh44t kkolstad kalsi8 cldeaton bradyrichmond yashwanth1988 darabi eole-repos anirudhagohokar m-creations ivan-pik lubovsky tonyyang9527 opensourceclub lukeburns varunvs viptech pontus-vision hoanghiep flashpaper12 romakita goat-lab unrealsolver limouren abdullahadeeb sukrit-adhikari vicharzbecher xaman-afk realbisoye ravisr sivap86 alexfe96 hanumanthraju forkedit casecommons askk manojpgupta slamj1 robertaird appcoreopc pandurd an-drew-dev sekmet matthub09 t6engineering nhohb congtrieu112 giannisdag devhang nikhiloo7 sangkyunyoon jonathanjemmic mkipcak yankande nweller-dc udayz77 cymen j-perl sinujohn91 michal-turzynski total-morons darshanksexathought sfs-common-components victor2016goreact's Issues
Unable to convert form io language
Hi,
I am trying to change one language to another language using option field in the Form io with particular data. onclicking the button am trying to change hindi language to malayalam. But Formio component is not rendering
Problem : Unable to change the language.
Node version : v10.3.0
Npm : 6.1.0
Form io : 1.17.1
import * as axios from "axios";
import React, { Component } from "react";
import { Form } from "react-formio";
import { routes } from "../urls";
class MyForm extends Component {
constructor(props) {
super(props);
this.state = {
form: undefined,
admin: true,
opts: {
readOnly: false,
language: "fr",
i18n: {
en: {
Email: "ईमेल",
Number: "संख्या",
Submit: "जमा करें"
},
fr: {
Email: "ഇമെയിൽ",
Number: "സംഖ്യ",
Submit: "Submit"
}
}
}
};
this.handleSubmitFunction = this.handleSubmitFunction.bind(this);
this.convertLanguage = this.convertLanguage.bind(this);
}
componentDidMount() {
let components = {
components: [
{
unique: false,
suffix: "",
conditional: {
show: "",
when: null,
eq: ""
},
hidden: false,
clearOnHide: true,
defaultValue: "",
tableView: true,
label: "Email",
protected: false,
placeholder: "",
properties: {
"": ""
},
kickbox: {
enabled: false
},
type: "email",
hideLabel: false,
prefix: "",
tags: ["admin"],
input: true,
persistent: true,
inputType: "email",
key: "email",
labelPosition: "top"
},
{
suffix: "",
properties: {
"": ""
},
hidden: false,
lockKey: true,
clearOnHide: true,
defaultValue: "",
validate: {
step: "any",
integer: "",
multiple: "",
required: false,
max: "",
min: "",
custom: ""
},
tableView: true,
label: "Number",
protected: false,
placeholder: "",
conditional: {
show: "",
when: null,
eq: ""
},
type: "number",
hideLabel: false,
prefix: "",
tags: ["print", "admin"],
input: true,
persistent: true,
inputType: "number",
key: "number",
labelPosition: "top"
},
{
type: "button",
label: "submit",
action: "submit",
theme: "primary"
}
]
};
this.setState({ form: components });
}
convertLanguage(e) {
var form = { ...this.state.form };
form.language = "en";
var opts = { ...this.state.opts };
opts.language = "en";
this.setState({ form });
}
render() {
return (
<div>
<input
type="choice"
onChange={this.convertLanguage}
name="language"
value="fr"
/>
<Form
onSubmit={this.handleSubmitFunction}
form={this.state.form}
options={this.state.opts}
/>
</div>
);
}
}
export default MyFrom;
Error installing react-formio
I am giving this command npm install react-formio but I get this warning and the form is not able to render
/react-formio/dist/build/Formio.js/react-formio/dist/build/Formio.js 1:479-486
Critical dependencies:
1:479-486 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./
Children with the same key bug
Hi, i'm using this library but i'm getting this error describe above
this is the JSON that Form.io is generating:
{
"_id":"577422c86eb8a901003f6401",
"modified":"2016-06-30T21:18:36.294Z",
"title":"Register Pacient Form",
"display":"form",
"type":"form",
"action":"https://potatoes.com/registerpacient",
"name":"registerPacientForm",
"path":"registerpacient",
"project":"57741e776eb8a901003f63ed",
"created":"2016-06-29T19:34:32.215Z",
"components":[
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"htmlelement",
"content":"Pacient Registration Form",
"className":"delta",
"attrs":[
{
"value":"",
"attr":""
}
],
"tag":"h1",
"input":false
},
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"htmlelement",
"content":"",
"className":"",
"attrs":[
{
"value":"",
"attr":""
}
],
"tag":"div",
"input":false
},
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"fieldset",
"components":[
{
"isNew":false,
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"columns",
"columns":[
{
"components":[
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"datetime",
"validate":{
"custom":"",
"required":true
},
"persistent":true,
"protected":false,
"timePicker":{
"arrowkeys":true,
"mousewheel":true,
"readonlyInput":false,
"showMeridian":true,
"minuteStep":1,
"hourStep":1
},
"datePicker":{
"datepickerMode":"day",
"yearRange":"20",
"maxMode":"year",
"minMode":"day",
"initDate":"",
"startingDay":0,
"showWeeks":true
},
"datepickerMode":"day",
"enableTime":false,
"enableDate":true,
"format":"yyyy-MM-dd",
"placeholder":"Today's Date",
"key":"todaysDate",
"label":"Today's Date",
"tableView":true,
"input":true
}
]
},
{
"components":[
]
}
],
"input":false
}
],
"legend":"",
"tableView":true,
"input":false
},
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"fieldset",
"components":[
{
"isNew":false,
"type":"textfield",
"conditional":{
"eq":"",
"when":null,
"show":null
},
"validate":{
"customPrivate":false,
"custom":"",
"pattern":"",
"maxLength":"",
"minLength":"",
"required":true
},
"persistent":true,
"unique":false,
"protected":false,
"defaultValue":"",
"multiple":false,
"suffix":"",
"prefix":"",
"placeholder":"Patient Name",
"key":"patientName",
"label":"Patient Name",
"inputMask":"",
"inputType":"text",
"tableView":true,
"input":true
},
{
"isNew":false,
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"columns",
"columns":[
{
"components":[
{
"type":"textfield",
"conditional":{
"eq":"",
"when":null,
"show":null
},
"validate":{
"customPrivate":false,
"custom":"",
"pattern":"",
"maxLength":"",
"minLength":"",
"required":true
},
"persistent":true,
"unique":false,
"protected":false,
"defaultValue":"",
"multiple":false,
"suffix":"",
"prefix":"",
"placeholder":"Social Security Number",
"key":"socialSecurityNumber",
"label":"Social Security Number",
"inputMask":"999-999-999",
"inputType":"text",
"tableView":true,
"input":true
}
]
},
{
"components":[
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"columns",
"columns":[
{
"components":[
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"datetime",
"validate":{
"custom":"",
"required":true
},
"persistent":true,
"protected":false,
"timePicker":{
"arrowkeys":true,
"mousewheel":true,
"readonlyInput":false,
"showMeridian":true,
"minuteStep":1,
"hourStep":1
},
"datePicker":{
"datepickerMode":"day",
"yearRange":"20",
"maxMode":"year",
"minMode":"day",
"initDate":"",
"startingDay":0,
"showWeeks":true
},
"datepickerMode":"day",
"enableTime":false,
"enableDate":true,
"format":"yyyy-MM-dd",
"placeholder":"Date of Birth",
"key":"dateofBirth",
"label":"Date of Birth",
"tableView":true,
"input":true
}
]
},
{
"components":[
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"number",
"validate":{
"custom":"",
"multiple":"",
"integer":"",
"step":"1",
"max":"",
"min":"",
"required":true
},
"persistent":true,
"protected":false,
"defaultValue":0,
"suffix":"",
"prefix":"",
"placeholder":"Age",
"key":"age",
"label":"Age",
"inputType":"number",
"tableView":true,
"input":true
}
]
}
],
"input":false
}
]
}
],
"input":false
},
{
"input":false,
"columns":[
{
"components":[
{
"input":true,
"tableView":true,
"inputType":"text",
"inputMask":"",
"label":"Address",
"key":"address",
"placeholder":"Address",
"prefix":"",
"suffix":"",
"multiple":false,
"defaultValue":"",
"protected":false,
"unique":false,
"persistent":true,
"validate":{
"required":true,
"minLength":"",
"maxLength":"",
"pattern":"",
"custom":"",
"customPrivate":false
},
"conditional":{
"show":null,
"when":null,
"eq":""
},
"type":"textfield"
}
]
},
{
"components":[
{
"input":false,
"columns":[
{
"components":[
{
"input":true,
"tableView":true,
"inputType":"text",
"inputMask":"",
"label":"Apartment Number",
"key":"apartmentNumber",
"placeholder":"Apartment Number",
"prefix":"",
"suffix":"",
"multiple":false,
"defaultValue":"",
"protected":false,
"unique":false,
"persistent":true,
"validate":{
"required":false,
"minLength":"",
"maxLength":"",
"pattern":"",
"custom":"",
"customPrivate":false
},
"conditional":{
"show":null,
"when":null,
"eq":""
},
"type":"textfield"
}
]
},
{
"components":[
]
}
],
"type":"columns",
"conditional":{
"show":null,
"when":null,
"eq":""
}
}
]
}
],
"type":"columns",
"conditional":{
"show":null,
"when":null,
"eq":""
}
},
{
"input":false,
"columns":[
{
"components":[
{
"input":true,
"tableView":true,
"inputType":"text",
"inputMask":"",
"label":"City",
"key":"city",
"placeholder":"City",
"prefix":"",
"suffix":"",
"multiple":false,
"defaultValue":"",
"protected":false,
"unique":false,
"persistent":true,
"validate":{
"required":true,
"minLength":"",
"maxLength":"",
"pattern":"",
"custom":"",
"customPrivate":false
},
"conditional":{
"show":null,
"when":null,
"eq":""
},
"type":"textfield"
}
]
},
{
"components":[
{
"input":false,
"columns":[
{
"components":[
{
"input":true,
"tableView":true,
"inputType":"text",
"inputMask":"",
"label":"State",
"key":"state",
"placeholder":"State",
"prefix":"",
"suffix":"",
"multiple":false,
"defaultValue":"",
"protected":false,
"unique":false,
"persistent":true,
"validate":{
"required":true,
"minLength":"",
"maxLength":"",
"pattern":"",
"custom":"",
"customPrivate":false
},
"conditional":{
"show":null,
"when":null,
"eq":""
},
"type":"textfield"
}
]
},
{
"components":[
{
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"number",
"validate":{
"custom":"",
"multiple":"",
"integer":"",
"step":"any",
"max":5,
"min":5,
"required":true
},
"persistent":true,
"protected":false,
"defaultValue":0,
"suffix":"",
"prefix":"",
"placeholder":"Zip",
"key":"zip",
"label":"Zip",
"inputType":"number",
"tableView":true,
"input":true
}
]
}
],
"type":"columns",
"conditional":{
"show":null,
"when":null,
"eq":""
}
}
]
}
],
"type":"columns",
"conditional":{
"show":null,
"when":null,
"eq":""
}
}
],
"legend":"Patient's basic information",
"tableView":true,
"input":false
},
{
"customClass":"button button--default",
"conditional":{
"eq":"",
"when":null,
"show":null
},
"type":"button",
"theme":"primary",
"disableOnInvalid":true,
"action":"submit",
"block":false,
"rightIcon":"",
"leftIcon":"",
"size":"md",
"key":"submit",
"tableView":false,
"label":"Submit",
"input":true
}
],
"owner":"56df54d0acb1fa0100471847",
"submissionAccess":[
{
"type":"create_all",
"roles":[
"57741e776eb8a901003f63f0"
]
},
{
"type":"read_all",
"roles":[
]
},
{
"type":"update_all",
"roles":[
]
},
{
"type":"delete_all",
"roles":[
]
},
{
"type":"create_own",
"roles":[
]
},
{
"type":"read_own",
"roles":[
]
},
{
"type":"update_own",
"roles":[
]
},
{
"type":"delete_own",
"roles":[
]
}
],
"access":[
{
"type":"read_all",
"roles":[
"57741e776eb8a901003f63ee",
"57741e776eb8a901003f63ef",
"57741e776eb8a901003f63f0"
]
}
],
"tags":[
]
}
Does not support React 16
Expected result
component Formio for react should run fine on react 16
Actual result
Formio relies on createClass not present in react 16, impossible to embed the forms generated in a new React 16 app.
Lodash function are imported all at once
more info in PR #92
Grid Component for Form.IO React?
Does the React implementation support/provide a Grid component to view submisions the way that the AngularJS implementation does?
If so is there an example of how to specify/use this Grid component?
Missing dependencies
Build fails, these dependencies are seem to be missing:
"react-widgets" and "formiojs"
How can I add custom header on post request?
Hey team,
As per my requirement, I need to add headers in my post request. How can I do it?
Date / Time Component not working
How to run whole project instead of single form.
ReactDOM.render(<Formio src="https://someFormId.form.io/user/login"></Formio> , document.getElementById('app') );
This only renders a single form.
Is there a way to redirect/navigate from one form to another in a react app?
onElementRender incorrect documentation
Looks like the onElementRender
callback takes two parameters: the Form.IO instance and the element. Also, the documentation should state that the onElementRender
handler must return the element to render (if it does not return anything, the form does not render).
FormBuilder - Text area not working
Created an empty project using create-react-app, and added FormBuilder. Dragging Text Area throws this error:
utils.js:138 An error occured within custom function for wysiwyg TypeError: instance.wysiwygDefault is not a function
Sample code:
import React, { Component } from 'react';
import {FormBuilder} from 'react-formio';
class App extends Component {
render() {
return (
<div className="App">
<FormBuilder
form={{ display: 'form' }}
</div>
);
}
}
export default App;
Custom Component - How to use ?
I couldn't find any information for react on how to use the custom component, any hint?
onFormLoad event does not work
Hello,
The "onFormLoad" event is not firing. Here is how i use the "Formio" react component:
<Formio submission={this.state.entityDetailViewModel.get('entityObject').toJSON()} form={JSON.parse(this.state.entityDetailViewModel.get('form'))} onFormSubmit={this.onFormSubmit} />
Button's reset action not working
Reset action does not clear any field.
Running the TODO app
This is not a big issue just worth mentioning as is easy to fix
The Task app
https://portal.form.io/#/project/57fd3190581e59007c155554/local
description to run app locally is confusing (at least it was for me)
No mention of how to install gulp as for example is mentioned
https://github.com/formio/formio-app-basic
Cheers
File Upload Problem
Hello,
Im using the localhost react-formio mode and i want to use the file upload on my form to upload pictures to localhost wisdom db.
So when i use the the interface of formio to add a picture,it works without problem,but when i try to use it on my react project the form does not appear and i got this error on my browser console:
Sorry for my bad english.
Module not found: Error: Can't resolve, Please help me with this
formiojs v2.32.3, react-formio v2.1.1, node v8.11.4 and npm 5.6.0
Im getting following error when I execute npm run serve
ERROR in .//react-formio/lib/modules/auth/containers/Login.js/react-formio/lib/modules/auth/containers/Login.js 11:14-51
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/auth/containers'
@ ./
@ .//react-formio/lib/modules/auth/routes.js/react-formio/lib/modules/auth/index.js
@ ./
@ ./src/app/auth/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index
ERROR in .//react-formio/lib/modules/auth/containers/Register.js/react-formio/lib/modules/auth/containers/Register.js 11:14-51
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/auth/containers'
@ ./
@ .//react-formio/lib/modules/auth/routes.js/react-formio/lib/modules/auth/index.js
@ ./
@ ./src/app/auth/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index
ERROR in .//react-formio/lib/modules/resource/containers/Edit.js/react-formio/lib/modules/resource/containers/Edit.js 11:14-51
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/resource/containers'
@ ./
@ .//react-formio/lib/modules/resource/routes.js/react-formio/lib/modules/resource/index.js
@ ./
@ ./src/app/resources/activity/index.js
@ ./src/app/resources/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index
ERROR in .//react-formio/lib/modules/resource/containers/View.js/react-formio/lib/modules/resource/containers/View.js 11:14-51
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/resource/containers'
@ ./
@ .//react-formio/lib/modules/resource/routes.js/react-formio/lib/modules/resource/index.js
@ ./
@ ./src/app/resources/activity/index.js
@ ./src/app/resources/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index
ERROR in .//react-formio/lib/modules/resource/containers/Create.js/react-formio/lib/modules/resource/containers/Create.js 11:14-51
Module not found: Error: Can't resolve '../../../components/Formio' in '/Users/activemac05/Desktop/main-project/react-app-starterkit/node_modules/react-formio/lib/modules/resource/containers'
@ ./
@ .//react-formio/lib/modules/resource/routes.js/react-formio/lib/modules/resource/index.js
@ ./
@ ./src/app/resources/activity/index.js
@ ./src/app/resources/index.js
@ ./src/index.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client ./src/index
React and webpack warnings
hi, i'm working with this library in a webpack application, but i'm getting these warnings:
Warning: React.__spread is deprecated and should not be used. Use Object.assign directly or another helper function with similar semantics. You may be seeing this warning due to your compiler. See https://fb.me/react-spread-deprecation for more details.
also i'm getting this in webpack:
WARNING in ./~/react-formio/dist/Formio.js
Critical dependencies: This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./~/react-formio/dist/Formio.js 343:501-508
Al so, when using a date component in form.io, the react component associated with the date component does not have any styles.
Uncaught TypeError: Cannot read property 'routerContext' of undefined
Hi :) ,
I got that error when I installed react-formio:
"Uncaught TypeError: Cannot read property 'routerContext' of undefined"
The error is in webpack:///./~/redux-view/lib/ReduxView.js
My package.json dependencies are:
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-formio": "^0.10.11",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"react-router-redux": "^4.0.6",
"redux": "^3.6.0"
}
And node version is v6.4.0
Thanks
Tab support ??
Goo days, there wiil be a support of tabs ??
The modules are very functional, but has no support of Tabs, it hard to use form builder with no tabs in every version react,ng2, and angularjs
Can not set defaultValue for Radio and Checkbox
When I change or submit Form, it was ok
But how can I re-render value on UI for them, I try to set defaultValue, it was good for another component, but with Radio and Checkbox, it was not ok, although I try in different ways.
Screen Record:
Anybody can help me, thank you so much!
Server side rendering
When trying to import react-formio:
import Formio from 'react-formio';
following error occures:
C:\Users\kala\workspace\react_fullstack\node_modules\formiojs\node_modules\whatwg-fetch\fetch.js:330
})();
^
ReferenceError: self is not defined
at C:\Users\kala\workspace\react_fullstack\node_modules\formiojs\node_modules\whatwg-fetch\fetch.js:4:7
at Object. (C:\Users\kala\workspace\react_fullstack\node_modules\formiojs\node_modules\whatwg-fetch\fetch.js:330:3)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (C:\Users\kala\workspace\react_fullstack\node_modules\formiojs\src\formio.js:9:1)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (C:\Users\kala\workspace\react_fullstack\node_modules\react-formio\lib\Formio.js:4:16)
FormBuilder onChange stops triggering after 4 calls
Created an empty project using create-react-app, and added FormBuilder with a simple console.log event for schema changes. After 4 changes, the event stops triggering.
Sample code:
import React, { Component } from 'react';
import {FormBuilder} from 'react-formio';
class App extends Component {
render() {
return (
<div className="App">
<FormBuilder
form={{ display: 'form' }}
onChange={(schema) => console.log(schema)} />
</div>
);
}
}
export default App;
Unresolved promises may be related to form not updating
We are seeing warnings from bluebird about: "a promise was created in a handler but was not returned from it". We dove into the formio code a bit and it looks like the chained then() are missing returns in some cases possibly (createForm may be the main culprit, setSubmission). Then back up in react-formio, returning formio from the createForm then() before initializeFormio adds an additional then() seemed to remove the last warning. We are not familiar with the code obviously though.
The main issue though is that when we initially set the form through the form prop on the Formio component, it shows fine, but then if we assign a new form it doesn't show the updated form. If we assign a another new (3rd) form then the 2nd form shows up. Its like it ends up 1 form behind. We suspect this is related to the unresolved promises but not sure.
_this2.builder.destroy() is not a function
I use FormBuilder, as:
render() {
return (
<div id="content" className="app-content" role="main">
<div className="wrapper-md">
<FormBuilder
form={{ display: 'form' }}
onChange={(schema) => this.onChangeFormBuilder(schema)}
/>
</div>
</div>
);
}
When I move to another component, it has error:
How can I fixed it ?
FormBuilder is reset when change state ?
Example, I have code:
class CreateForm extends Component {
constructor() {
super();
this.state = {
components: {},
name: '',
}
}
...
render () {
return (
<div>
...
<FormBuilder onChangeFormBuilder={this.onChangeFormBuilder} />
...
</div>
)
}
Anytime 'name' or 'components' was changed, FormBuilder is reset
Select Component - Cannot update during an existing state transition
A Select component using CUSTOM data + RefreshOn Anychange (data) fails with error
setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.
Reproduction : Using an existing form
- Create Select component
- Set Data source of Select component as Custom.
- Fill data source with
values=[{ label: '1', name:'one'}]
- Refresh React page that points to the said form and type anything on the form.
TypeError: _react2.default.createClass is not a function
./node_modules/react-formio/lib/components/FormComponents/address.js
node_modules/react-formio/lib/components/FormComponents/address.js:25
22 |
23 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
24 |
25 | module.exports = _react2.default.createClass({
26 | displayName: 'Address',
27 | mixins: [_valueMixin2.default, _selectMixin2.default, _componentMixin2.default],
28 | getTextField: function getTextField() {
Edge delete globalObject[safeGlobalName]; issue
Hey, I'm hoping someone is about to help me on an issue i'm seeing in microsoft edge.
I included formio react and setup a form and it works a treat everywhere except edge (even IE11)
This issue is causing the client site to render a white page with no errors in the console. However the below is what the dev environment gives me.
I would really appreciate a quick response if at all possible
Thanks!
Form initial data
Hello, is there a way to initialize a form with a JSON data object?
I would like to do something like this:
<Form form={schema} data={initialData} />
Thanks in advance,
Juan
react-widgets styles
Hey, one last thing (Hopefully), how do i add the styles for the react widgets components, is there an easy way, what would be the steps there?
Dynamic form creation
I want to build a quiz-maker app in which users create dynamic forms instead of developers.
Is this feasible using formio?
Address component don't call google maps api
Hi guys!
I am doing some tests with formio
libraries. So far I was able to encapsulate the ngFormBuilder
inside a react component for a react application and I am using react-formio
to render the forms from the json schemas.
I noticed that the address
component is not making calls to the google maps api. It is working on ngFormio
though... I Download both of the examples and ran then locally.
- https://github.com/formio/examples.form.io (calls maps api)
- https://github.com/formio/react-example (don't call maps api)
I also noticed that the doSearch
method inside the address
component is responsible for the api call but it is not being called anywhere as it can be seen here:
Will this feature be implemented anytime soon? Would it be ok to submit a pull request?
Thanks!
Edit layout inner component has error.
If use layout component, when edit component inner the layout. Parent object don't has editComponent method.
custom action url setted in the client
Hi, right now we are exploring the possibility to add form.io into our app, but we need to set the form endpoint dynamically (based on some id) within out client side application, and we were wondering if it is posible set the form endpoint or action in the client side app using this library?
Survey component has a bug
Survey component is allowing you to mark many options on the same row.
It is currently trying to access a property from a variable that should be an object though it is actually a string...
This was tested on the https://github.com/formio/react-example project.
Is this bug known? Is this fix on the roadmap? I might be of some help, maybe even submit a Pull Request.
Server side code fails with window undefined
When running form.io the server side fails with following:
/home/tuomjarv/workspace/emedi/kusote/node_modules/formiojs/build/formio.pdf.js:182
window.addEventListener('message', function (event) {
^
ReferenceError: window is not defined
at Object.<anonymous> (.../node_modules/formiojs/build/formio.pdf.js:182:1)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (.../node_modules/formiojs/build/formio.full.js:11:16)
at Module._compile (module.js:570:32)
Please guide me how to implement this on my react project
Hello,
Can you please guide me how to implement this on my react project, I'm confused as its mentioned only few lines to get a formbuilder, but i need to customize the whole components inside project and react-app-starterkit isn't working as its trowing module not found error.
Thanks in Advance
Harshith
Select refreshOn not working
Hi, it seems like the refreshOn only works once.
I have a dropdown that loads from a URL and I have it set up with refreshOn to refresh when another dropdown changes.
This only happens once, when I change the second dropdown a second time it doesn't refresh anymore.
Any thoughts? maybe I'm missing a setting or something to refresh multiple times instead of one?
Thanks in advance,
Juan
current react-formio version is now broken because of the latest react-router release
Hi there! The latest react-router release (v4.0.0-beta.2) is not exporting propTypes in index.js anymore. So now this line of code is broken, and whole react-formio library cannot be required correctly. So i guess you should fix your package.json file or migrate to the latest react router version.
Wizard Support?
How can I render a "wizard" with the React library? Thanks.
Changes in #92 took no effect
Hello again! Thx for replying to #93 and merging #92.
Unfortunately these changes took no effect because PR was merged after new lodash imports were created in code:(
i've prepared new PR #95 to fix this again.
I've also tried to add some linting rules like http://eslint.org/docs/rules/no-restricted-imports, to automatically prevent creating such imports in the future. But it looks like that eslint currently in broken state:( And it is not a part of the project build
"Attempting to select choice already selected" in console when using Formio component
The project I'm working on is experiencing this warning. It doesn't seem to cause any actual problem except clogging up the console with warnings that don't contribute any useful information.
Preconditions:
- A select field with a default value
This could potentially be a problem in formio.js.
If I am understanding correctly, rendering this Formio
component results in a call to createForm
inside of formio.js's formio.form.js. This code looks like the following:
createForm(form) {
/**
* {@link BaseComponent.component}
*/
if (this.component) {
this.component.components = form.components;
}
else {
this.component = form;
}
return this.onFormBuild = this.render().then(() => {
this.formReadyResolve();
this.onFormBuild = null;
this.setSubmission(this._submission);
},
(err) => this.formReadyReject(err)
).catch(
(err) => this.formReadyReject(err)
);
}
I think this.render()
indirectly results in a call to setValue on the Select which is fine the first time since no value is selected yet. However in the callback for render there is also a call to this.setSubmission(this._submission)
which also indirectly results in a call to setValue which is trying to set the selected value to something that was already selected when rendering which results in this warning showing up.
Any suggestions what the cleanest way to fix this could be? Is there anything else I should be checking?
re-render form not smooth
When I re-render form of formio, it looks:
http://g.recordit.co/ZOX9ZDsAgw.gif
How can I make it smoother, or turn off loading when re-render
Adapting Form.io to the latest version of react
Hi,
I’m using Form.io for a project at work, and my team and I would like to keep using Form.io as well as being able to upgrade our react version.
I’m currently working on a POC to see what changes are necessary to make Form.io compatible. I’ll send a pull request as soon as I have something stable!
I didn't see any similar, ongoing projects, but please let me know if someone's currently working on the same subject. Thanks!
Select Components - Enable credentials on URL Option
Awesome jobs folks, I think it has a lot of potential as an enterprise tool.
The select component values can be retrieved from a URL, but credentials are not sent during the request and if the values are behind some authentication it fails.
Is it possible to enable a "Credentials" checkmark at the form/component level to enable the 'credentials' flag on the request?
Further in the future maybe an Authentication option to specify more properties.
Thanks!
input-group on wrapping every component
I'm having this issue where every component in the form is getting the input-group class, and that class is just for elements with prefix or sufix (or both), and when using bootstrap, the style is messed up.
Issue with reduxRouter
I was attempting to compile with browserify a run this on the client side. The compilation goes fine, but when I attempt to render the component I get this error:
[Error] TypeError: undefined is not an object (evaluating '_reactRouter.propTypes.routerContext')
(anonymous function) (application.js:100423)
s (application.js:1:259)
(anonymous function) (application.js:1:307)
(anonymous function) (application.js:18648)
s (application.js:1:259)
(anonymous function) (application.js:1:307)
(anonymous function) (application.js:18668)
s (application.js:1:259)
(anonymous function) (application.js:1:307)
(anonymous function) (application.js:17687)
s (application.js:1:259)
(anonymous function) (application.js:1:307)
(anonymous function) (application.js:18013)
s (application.js:1:259)
(anonymous function) (application.js:1:307)
(anonymous function) (application.js:17633)
s (application.js:1:259)
(anonymous function) (application.js:1:307)
(anonymous function) (application.js:11)
(anonymous function) (application.js:46)
s (application.js:1:259)
e (application.js:1:427)
Global Code (application.js:1:444)
Multiple forms?
Hello,
I have problems integrating multiple forms on one page. I have different
<Form key={somekey1}
src={"https://my.form.io/myform"}
submission={this.props.file.submission}
onChange={(s) => this.onChange(s,'mainform')} />
<Form key={somekey2}
src={"https://my.form.io/addform"}
submission={this.props.file.submissionForm1}
onChange={(s) => this.onChange(s,'addform1')} />
<Form key={somekey3}
src={"https://my.form.io/addform"}
submission={this.props.file.submissionForm2}
onChange={(s) => this.onChange(s,'addform2')} />
Are multiple forms on the same page supported anyway?
Thanks
Harald
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.