npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

rfp-react-form-builder

v1.1.3

Published

A form builder/planner for react. Formally known as react-form-planner

Downloads

45

Readme


GitHub watchers GitHub watchers GitHub watchers GitHub watchers

This is a fully customizable form builder based on React

Table of Contents

Screenshots

| | | | ---------------------------------------- | -------------------------------------------- | | image info | image info | | image info | image info |

Demo

Visit https://rfp-react-form-planner.vercel.app/

Playground

Codesandbox Project

Features

  • JSON based.
  • Redux based.
  • Fully Responsive
  • Customizable
  • Quick and easy.
  • Styled component based.
  • Theme supported
  • Full validation support
  • Custom theme

When do you need it

  • You have complex form to be created?
  • Forms are dynamic in nature?
  • You don't want to manage the form?
  • You need a structured/organised form rendering?
  • You are providing forms as service

Usage

  • Simple Form
  • Dynamic Form
  • Quiz
  • Exams
  • Tutorial
  • Sky is the only limit

Install 🐙

npm install rfp-react-form-builder react-icons react-player styled-components @mui/material

or

yarn add rfp-react-form-builder react-icons react-player styled-components @mui/material

Highlight 🔥

This project contains an advanced Form Builder and a Form Viewer.

Form Builder

  • Capable of creating form of any type.
  • Styled component theme support
  • Endlesss Customization
  • Add your own style
  • Add your own properties

How to use

Import FormPlanner component

import { FormPlanner } from 'react-form-viewer'

Just drop it to desired place

<FormPlanner
  onControlValueChanged={() => {
    console.log('onControlValueChanged')
  }}
  onFormValueChanged={() => {
    console.log('onFormValueChanged')
  }}
  theme={dark}
/>

Supported Elements

FormPlanner comes with tons of prebuilt elements which are already grouped for convenience. Few of them are visible by default. Rest can be turned on when required

| Group | Element | Internal Name | Availability | | ------------- | --------------------- | ------------- | ------------ | | Basic | Header | header | Default | | | Medium Header | mediumheader | Default | | | Small Header | smallheader | Default | | | Label | label | Default | | Form Control | Text Box | text | On Demand | | | Number Box | number | On Demand | | | Multiline Box | multiline | On Demand | | | Date Picker | date | On Demand | | | Date Time Picker | datetime | On Demand | | | Checkbox | checkbox | On Demand | | | Radio | radio | On Demand | | | Select | select | On Demand | | | Color Picker | color | On Demand | | Media | Image | image | On Demand | | | Video | video | On Demand | | | PDF | pdf | On Demand | | Quiz | Question | question | On Demand | | Advanced | Grid | grid | On Demand | | | Rich Text | richtext | On Demand | | | Multi Values | multivalue | On Demand | | Uploads | Image Upload | imageupload | On Demand | | | Multiple Image Upload | imagesupload | On Demand | | Miscellaneous | Divider | divider | On Demand |

Form Properties

Allows to add/update form meta information like

  • Title
  • Description
  • Header background image
  • Header background color
  • Background image
  • Background color image info

Form Parameters

| Name | Description | Default Value | | ------------------ | ------------------------------------------------------- | ------------- | | showFormProperties | Show form properties button to update form level values | false | | showPreview | Integrated button to show form preview | false | | allowCustomStyles | Allow user to set custom css styles | false | | allowCustomProps | Allow user to set custom field properties | false | | advancedFeatures | Enable advanced features | false | | fields | List of control types to be shown | All |

Preview your form

Preview your form while editing

Form Viewer

This is a full fledged form viewer.

  • Capable of rendering complex form layout.
  • Multi line and multi row
  • Theme support

How to use

Import FormPlanner component

import { FormPlanner } from 'react-form-viewer'

Just drop it to desired place

<FormViewer
  onChange={(a, b, c) => {
    console.log('Value received')
  }}
  template={<template_data>}
/>

Items in queue

  • Localization

Contribution 🍰

Feel free to create issue and make pull request

Refer code of conduct

Refer contributing

License

MIT © Koustov