param-helper v1.0.25

param-helper

This package attempts to provide the functionality of parameter helper project as React components.

DISCLAIMER:- This package is still under development and currently serves as a proof of concept

Installation

npm i param-helper

Usage

The package contains 3 React components.

Form Builder

This component builds the form based on the schema and accepts user input.

Since this application depends on Browser tabs and URL qeury parameters for passing data, it requires a path for itself.

Please refer to the example index.js below.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import { FormBuilder, Parent } from "param-helper";
import { BrowserRouter as Redirect, Route, Switch } from "react-router-dom";
import { HashRouter } from "react-router-dom";
import test from "./test";

ReactDOM.render(
  <div className="content">
    <HashRouter>
      <Switch>
        <Route path="/form" component={FormBuilder} />
        <Route path="/parent" component={Parent} />
        <Route path="/test" component={test} />
        <Route exact path="/">
          <Redirect to="/test" />
        </Route>
      </Switch>
    </HashRouter>
  </div>,

  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

FormField

This component is a single input field. When clicked, it opens a new tab based on the provided parameters and accepts the generated JSON.

Please refer to the example below.

import React, { Component } from "react";
import { FormField } from "param-helper";

export class test extends Component {
  constructor(props) {
    super(props);

    //this schema was developed using schema generator for param-helper

    this.schema = {
      root: [
        {
          title: "a",
          field: "a",
          editor: "input",
        },
        {
          title: "b",
          field: "b",
          editor: "input",
        },
        {
          title: "c",
          field: "c",
          editor: "input",
        },
      ]
    };


    //this can be array or json. array produces a JSON array, json produces a single JSON object.

    this.type = "array";
  }

  render() {

      //fieldName refers to the label for the input field
      //id refers to the id for the input field
      //pathName is the sub path for the FormBuilder in the application, uses the application domain name

    return (
      <FormField
        schema={this.schema}
        type={this.type}
        fieldName="Test Field"
        id="field"
        pathName="/#/form"
      />
    );
  }
}

export default test;

Parent

This is a schema generator. Like FormBuilder, this also requires a path for itself. The path is hardcoded to "parent" right now, will update in future versions. This component is optional and independed of the other 2 components.

Example

This above code is from this project.