Skip to content
This repository has been archived by the owner on Dec 5, 2022. It is now read-only.
/ radform Public archive

⚡️ Headless (Bring your own UI) Drag and Drop Form Builder for React

License

Notifications You must be signed in to change notification settings

hennessyevan/radform

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Rad Form (name is WIP)

radio


Disclaimer

This package is still heavilty under development, many of the features have not been written yet and the API and scope may change at any time


This package provides a BYOS (Bring your own styling) approach to drag-and-drop form building in React. It follows the unist spec for its hast schema allowing for many of those plugins to work with it.

Get Started

Install radform

npm i radform
// or
yarn add radform

Start with a basic structure

import { RadForm } from 'radform'

function MyFormBuilderComponent() {
  return (
    <RadForm>
      {/* This field will be registered as "text-input" */}
      <RadField name="text-input">
        {/* Component to be used in the renderered form */}
        <input type="text" />
      </RadField>
      <RadField name="text-input">
        <button type="button" />
      </RadField>
    </RadForm>
  )
}

RadForm

This component collects all of the RadField configurations and injects the RadForm context.

PropTable

type RadForm = {
  initialFields?: string[]
  children: (utilities) => ReactNode | ReactNode
}
// Each RadField represents a form element to be used in the builder
type RadField = {
  name: string
  preview?: (bag: RadFieldBag) => ReactNode | ReactNode
  children: ReactElement
}
// Used for rendering the Field Previews
type Preview = ReactNode
// Pretty prints the JSON output
type Debugger = ReactNode

About

⚡️ Headless (Bring your own UI) Drag and Drop Form Builder for React

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published