Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@rjsf/core

Package Overview
Dependencies
Maintainers
2
Versions
114
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rjsf/core

A simple React component capable of building HTML forms out of a JSON schema.

  • 5.0.0-beta.9
  • Source
  • npm
  • Socket score
Version published
Weekly downloads
355K
decreased by-6.37%
Maintainers
2
Weekly downloads
 
Created

What is @rjsf/core?

@rjsf/core is a React library for building forms from JSON schema. It provides a simple way to create and manage forms in React applications by leveraging JSON schema definitions.

What are @rjsf/core's main functionalities?

Form Creation

This feature allows you to create a form based on a JSON schema. The schema defines the structure and validation rules for the form fields.

const Form = require('@rjsf/core').default;
const schema = {
  title: "A registration form",
  type: "object",
  required: ["firstName", "lastName"],
  properties: {
    firstName: {type: "string", title: "First name", default: "Chuck"},
    lastName: {type: "string", title: "Last name"},
    age: {type: "integer", title: "Age"}
  }
};

const App = () => (
  <Form schema={schema} />
);

Custom Widgets

This feature allows you to use custom widgets for form fields. You can define your own React components to be used as widgets in the form.

const { default: Form } = require('@rjsf/core');
const CustomWidget = (props) => {
  return (
    <input type="text" value={props.value} onChange={(event) => props.onChange(event.target.value)} />
  );
};

const schema = {
  title: "A form with custom widget",
  type: "object",
  properties: {
    customField: {type: "string", title: "Custom Field"}
  }
};

const uiSchema = {
  customField: {
    "ui:widget": CustomWidget
  }
};

const App = () => (
  <Form schema={schema} uiSchema={uiSchema} />
);

Form Validation

This feature allows you to define validation rules in the JSON schema. The form will automatically validate the input based on these rules.

const { default: Form } = require('@rjsf/core');
const schema = {
  title: "A form with validation",
  type: "object",
  properties: {
    age: {type: "integer", title: "Age", minimum: 18}
  }
};

const App = () => (
  <Form schema={schema} />
);

Other packages similar to @rjsf/core

    formik

    Formik is a popular form library for React that provides a higher-level API for managing form state, validation, and submission. Unlike @rjsf/core, Formik does not use JSON schema for form definitions but offers more flexibility in handling complex form logic.

    react-hook-form

    React Hook Form is a performant, flexible, and extensible form library for React. It uses hooks to manage form state and validation, providing a more lightweight and performant alternative to @rjsf/core. It does not rely on JSON schema but offers great control over form behavior.

    redux-form

    Redux Form is a library for managing form state in Redux. It integrates deeply with Redux to provide a seamless way to handle form state and validation. Unlike @rjsf/core, it requires Redux as a dependency and is more suitable for applications already using Redux.

Keywords

FAQs

Package last updated on 22 Sep 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Python Overtakes JavaScript as Top Programming Language on GitHub

Security News

Python Overtakes JavaScript as Top Programming Language on GitHub

Python becomes GitHub's top language in 2024, driven by AI and data science projects, while AI-powered security tools are gaining adoption.

By Sarah Gooding  -  Oct 30, 2024
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc