@chiradeep/rjsf-semantic-ui v2.0.0-alpha.6

Table of Contents

• Table of Contents
• About The Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
  • Semantic Widget Optional Properties
  • Custom Semantic Widget Properties
• Roadmap
• Contributing
• Contact

About The Project

Exports semantic-ui theme, fields and widgets for react-jsonschema-form.

Built With

• react-jsonschema-form
• Semantic-UI

Getting Started

• see getting started guide on react-semantic-ui

Prerequisites

• @semantic-ui-react >= 0.87.0 (V0.87.0)
• @semantic-ui-css >= 2.4.1 (default theme for semantic-ui)
• see theming guide if you wish to customize
• react-jsonschema-form >= 1.6.0 (in 1.6.0, the withTheme HOC was added)

yarn add semantic-ui-css add semantic-ui-react react-jsonschema-form

Installation

yarn add semantic-ui-react

Usage

import { withTheme } from 'react-jsonschema-form';
import { Theme as SemanticUITheme } from 'rjsf-semanitc-ui';

const Form = withTheme(SemanticUITheme);

or

import SemanticUIForm from 'rjsf-semantic-ui';

##Optional Semantic-UI Theme properties

• To pass additional properties to widgets see guide.

Semantic Widget Optional Properties

• Semantic props for TextWidget
• Semantic props for CheckboxWidget
• Semantic props for SelectWidget
• Semantic props for RangeWidget
• Semantic props for RadioWidget
• Semantic props for PasswordWidget
• Semantic props for UpDownWidget
• Semantic props for TextAreaWidget

Custom Semantic Widget Properties

const uiSchema = {
  "ui:options":  {
    semantic: {
      fluid: true,
      inverted: false,
      errorOptions: {
        size: 'small',
        pointing: 'above',
      }
    },
  }
};

Below is the current default options for all widgets

{
  "ui:options":  {
   semantic: {
     fluid: true,
     inverted: false,
     errorOptions: {
      size: 'small',
      pointing: 'above',
    }
   },
 }
}

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Read our contributors' guide to get started.

Contact