@lifesg/web-frontend-engine NPM

LifeSG Web Frontend Engine

Repository for the web frontend engine

UI components based on React design system
Form generation via JSON schema
To see the schema and fields available, visit our Storybook documentation.

The intention of frontend engine is to take out the heavy lifting of form development and offer a collection of common fields so engineers can develop forms quickly. The form will be defined through a JSON schema so non-engineers can customise the form as well.

Dependencies

Developers are expected to have the following packages installed:

@lifesg/react-design-system 2.5.0-canary.5
@lifesg/react-icons 1.2.0
react 17.0.2 or 18
react-dom 17.0.2 or 18
styled-components 5.3.5

Installation

npm i @lifesg/web-frontend-engine

Usage

import { FrontendEngine } from "@lifesg/web-frontend-engine";

const App = () => {
	return (
		<FrontendEngine
			data={{
				sections: {
					mySection: {
						uiType: "section",
						children: {
							myField: {
								uiType: "text-field",
								label: "My field",
							},
							submit: {
								uiType: "submit",
								label: "Submit",
							},
						},
					},
				},
			}}
		/>
	);
};

export default App;