Wijmo, React UI Component

100 fast and flexible React UI components

Boost your development efficiency with over 100 enterprise UI controls for React developers, including grids, charts, maps, pivots, inputs, calendars, and more!

Why Wijmo

Why choose Wijmo for your React App?

React and Next.js support

Wijmo supports React v19 and Next.js v15. It provides rich declarative markup for all components and, if necessary, React Redux support.

Support for 100 UI controls

Wijmo supports over 100 UI controls, including grids, 80 charts, reports, input forms, calendars, and OLAP.

Designed for touch

Extend touch functionality to all controls across your application, including Wijmo's touch module. When building websites and PWAs, provide users with a smooth and enjoyable user experience on tablets and mobile devices.

Excel-like controls

Wijmo's FlexGrid, FlexChart, and FlexSheet controls are designed to provide users with a familiar Excel-like experience. This makes Wijmo's UI controls easier to use.

Extensive documentation, demos, and APIs

Learn Wijmo easily with developer documentation, demos, and APIs. You can modify the code directly in the online demo or download it locally to freely test its features.


Quick Start

Getting Started with Wijmo in React 🚀

1. Go to the React app folder and install the Wijmo library.

npm install @mescius/wijmo.react.all

2. Also install the useEvent library.

npm install react-use-event-hook

3. Add css file to apply Wijmo style.

Go to the src/App.js file of the React app you're working on and add the Wijmo css file (see the index.js file in the sample below).

// App.js

import '@mescius/wijmo.styles/wijmo.css';

4. Set the Korean cultural sphere in Wijmo.

// App.js

import '@mescius/wijmo.cultures/wijmo.culture.ko' ;

5. Add the Wijmo modules you want to use.

Add the Wijmo module as follows:

Please check the index.js file in the sample below for detailed code for each control.

// App.js

import * as { namespace } from '@mescius/wijmo.react.{control name}' ;

6. Initialize the Wijmo control and add it to the screen.

After initializing the Wijmo control and generating sample data, we write code to display the Wijmo control on the screen.

Please check the detailed code for each control in the index.js file in the sample below.

FlexGrid
FlexChart
FlexMap
OLAP
Input
  • Below is the code to add the Wijmo FlexGrid module.

     import * as wjGrid from '@mescius/wijmo.react.grid'; 
    

    전체 코드는 아래 샘플에서 확인해 주세요.

  • Below is the code to add the Wijmo FlexChart module.

     import * as wjChart from '@mescius/wijmo.react.chart'; 
    

    전체 코드는 아래 샘플에서 확인해 주세요.

  • Below is the code to add the Wijmo FlexMap module.

     import * as wjMap from '@mescius/wijmo.react.chart.map'; 
    

    전체 코드는 아래 샘플에서 확인해 주세요.

  • Below is the code to add the Wijmo OLAP module.

     import * as wjOlap from '@mescius/wijmo.react.olap'; 
    

    전체 코드는 아래 샘플에서 확인해 주세요.

  • Below is the code to add the Wijmo Input module.

     import * as wjInput from '@mescius/wijmo.react.input'; 
    

    전체 코드는 아래 샘플에서 확인해 주세요.

5. Run the React app and check the results.

npm start


React Starter Template

Jump-start your development with customizable React samples and templates.

Here are various templates and samples utilizing Wijmo. You can check out the actual demos and download the source code to customize and use them yourself.

  • Ecommerce Dashboard

    This is a sample e-commerce dashboard designed to display data at a glance using various Wijmo controls. * The Wijmo controls used in this sample are charts, grids, maps, and calendars. Download the zip file React

    View Demo
  • Survey Results Dashboard

    Wijmo's charts and grids are designed to help you efficiently analyze survey data. Download the zip file in React.

    View Demo
  • Traffic Monitoring Dashboard

    A React-based dashboard that displays web server traffic by country. Download the zip file React

    View Demo
  • Geography Dashboard

    An interactive geographic dashboard for analyzing demographic data. Download the zip file in React.

    View Demo
  • Dynamic Dashboard

    This tutorial demonstrates how to use Wijmo controls in a customizable, dynamic dashboard. Download the zip file for React.

    View Demo
  • Cryptocurrency Tracking

    Track cryptocurrency values by integrating Wijmo's powerful financial charting component into your grid. Download the zip file React-Redux

    View Demo

FlexGrid

The fastest and most flexible React data grid

The best JavaScript data grid (table) with built-in sorting, formatting, paging and flexible data binding.

Learn more >

Sort, edit, filter

Grouping, aggregation

data binding

Export to Excel, PDF

Fix rows, columns, and headers

Custom cells

Paging, virtual scrolling

TreeGrid, Master-Detail

print

search

FlexChart

80 High-Performance React Charts

With over 80 different charts, you can effectively visualize the data you want.

Learn more >

bar chart

Line chart

Area chart

Scatterplot chart

bubble chart

Pie and donut charts

Sunburst chart

Treemap chart

Polar and radial charts

financial charts

FlexMap

React map control for geographic data visualization

Use map controls to visualize geographic data for easier analysis.

Learn more >

Bubble Map

Choropleth 맵

Distributed map

Sample map of Korea

OLAP

High-performance Excel-like React pivot tables and charts

Analyze and process massive amounts of data in milliseconds without relying on the server side.

Learn more >

Overview mode

Excel-like design panel

Pivot Grid

Pivot chart

Slicer

Input

Powerful React input components

Includes various input controls required in the frontend, such as autocomplete, color palette (picker), date/time, mask, menu, and multi-select.

Learn more >

Drop down

combo box

Autocomplete

Multiple selection

Date/Time Picker

Enter numbers

Validation

menu

Pop-up

Color Picker

React UI Control Designer

Easily customize Wijmo controls!

Wijmo CSS Theme Designer

Easily create design themes using the Wijmo CSS Theme Designer and apply the created CSS to your Wijmo controls!

Using the Wijmo CSS Theme Designer

Wijmo Control Properties Editor

Easily customize the settings of Wijmo controls using the Wijmo Control Properties Editor. You can modify and check the settings for over 20 different controls. Download these settings and quickly and easily apply them to your web without any additional coding.

Using the Wijmo Control Properties Editor

Ask anything!

Please share your concerns and questions about Wijmo with MESCIUS's expert team. We empathize with your concerns and provide assistance.
Online product consultation Developer Forum (Technical Support)

React UI Control Online Study

Explore the many ways to use Wijmo React UI controls.

View more articles