EasyReactJavaUI

EasyReactJavaUI is a React + TypeScript UI builder library that lets developers create screens with a Java-style, class-based fluent API instead of writing JSX for every layout.

Created by Pradeep Kumar Sheoran (Developer) at BSG Technologies.
Contact: +91-8595147850

Installation

npm install easy-react-java-ui

React and ReactDOM are peer dependencies, so install them in your app if they are not already present.

npm install react react-dom

Basic Usage

import {
  EasyReactJavaUIRenderer,
  Page,
  Card,
  Grid,
  Input,
  Select,
  DatePicker,
  Button,
  Table,
} from "easy-react-java-ui";

const userScreen = new Page("User Management")
  .add(
    new Card("Search Users").add(
      new Grid(3)
        .add(new Input("name").label("Name").placeholder("Enter name").required())
        .add(new Select("status").label("Status").source("userStatus"))
        .add(new DatePicker("createdAt").label("Created At"))
        .add(new Button("Search").variant("primary").onClick("fetchUsers")),
    ),
  )
  .add(
    new Table("users")
      .pagination(true)
      .filterable(true)
      .column("name", "Name")
      .column("email", "Email")
      .column("status", "Status")
      .action("Edit", "editUser", { permission: "USER_EDIT" })
      .action("Delete", "deleteUser", { permission: "USER_DELETE" }),
  );

export function App() {
  return (
    <EasyReactJavaUIRenderer
      screen={userScreen}
      dataSources={dataSources}
      actions={actions}
      permissions={["USER_EDIT"]}
      values={{}}
      onChange={(values) => console.log(values)}
      onError={(error) => console.error(error)}
    />
  );
}

Why EasyReactJavaUI?

• Build React screens using class-based fluent APIs.
• Keep admin, CRUD, report, dashboard, and form screens consistent.
• Bind data sources and actions by safe string keys.
• Avoid XML, unsafe eval, and paid visual-builder dependencies.
• Keep screen definitions portable and easy to review.

Core Builders

EasyReactJavaUI includes:

Page, Card, Grid, Row, Col, Input, Textarea, Select, Checkbox, Radio,
DatePicker, Button, Modal, Tabs, Tab, Table, Column, Action, Badge,
Alert, Divider, Text, Heading, CustomElement

Data Sources

const dataSources = {
  users: () => userService.getUsers(),
  userStatus: () => userService.getUserStatuses(),
};

Use them in builders:

new Select("status").label("Status").source("userStatus");
new Table("users").source("users").pagination(true);

Actions

const actions = {
  fetchUsers: async ({ reload }) => {
    await reload("users");
  },
  editUser: ({ row }) => {
    console.log("Edit", row);
  },
};

Use them in builders:

new Button("Search").onClick("fetchUsers");
new Table("users").action("Edit", "editUser");

Permissions

new Button("Create User").permission("USER_CREATE");
new Table("users").action("Delete", "deleteUser", { permission: "USER_DELETE" });

If a permission is missing from the renderer permissions array, that element or action is hidden.

Validation

new Input("email").label("Email").type("email").required();
new Input("age").label("Age").type("number").min(18).max(60);
new Input("phone").label("Phone").pattern("^[0-9]{10}$");

Custom Components

import { registerEasyReactJavaUIComponent, CustomElement } from "easy-react-java-ui";

registerEasyReactJavaUIComponent("StatusBadge", ({ element }) => {
  return <strong>{String(element.props.value ?? "")}</strong>;
});

new CustomElement("StatusBadge").prop("field", "status");

Package Info

import { EasyReactJavaUIInfo } from "easy-react-java-ui";

console.log(EasyReactJavaUIInfo);

Build

npm run build

License

MIT