Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:
Welcome to the documentation for json-formkit, a powerful and easy-to-use form builder component! This package allows you to dynamically generate forms based on a schema definition, making it ideal for a wide variety of use cases. Whether you're handling user input, creating surveys, or building more complex forms, json-formkit offers the flexibility you need with minimal effort.
To get started with json-formkit, simply install it using npm:
npm i json-formkit
Once installed, you can easily import and use the form builder component in your React project.
To see json-formkit in action, click here.
Here is an example of how to use json-formkit in your React component:
import React from 'react'; import JsonFormKit from 'json-formkit'; const schema = { fields: [ { field: "label", label: "Description" }, { field: "textarea", name: "description", props: { rows: 4, cols: 50, defaultValue: "This is the initial value", }, }, { field: "submit", label: "Submit", props: { type: "submit" }, blockProps: { style: { marginTop: "0.5rem", display: "flex", justifyContent: "flex-end", }, }, }, ], }; function App() { return <JsonFormKit schema={schema} />; } export default App;
This simple example renders a form based on the provided JSON schema. json-formkit automatically handles the form structure, validation, and dynamic rendering of fields.
With json-formkit, customizing your form is simple and flexible. You can define custom input types, use built-in validation methods, and apply custom themes to make your forms fit the look and feel of your application.
Here are some common use cases for json-formkit: