react-expression

Flexibile UI expression builder for React.

Install

npm install --save react-expression

Usage

import React, { useState } from 'react';
import Expression from 'react-expression';

const presets = {
  functions: {/* functions presets */},
  datatypes: {/* datatypes presets */},
  references: [/* references presets */],
  operators: {/* operators presets */},
  suggestions: {/* suggestions presets */},
};

function Example() {
  const [operation, setOperation] = useState({
    uuid: '',
    args: [],
  });
  const [errors, setErrors] = useState([]);

  const props = {
    ...presets,
    operation
  };
  const onChange = (operation, errors) => {
    setOperation(operation);
    setErrors(errors);
  }

  return (
    <>
      <Expression {...props} isEditable onChange={onChange} />
      Errors: {errors.join('; ')}
    </>
  );
};

Available Scripts

In the project directory, you can run:

npm run start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

cd example && npm run start

Runs the example app in the development mode. By default open http://localhost:3000 to view it in the browser.

npm run build

Builds the app for production to the dist folder.

npm run test

Launches the jest test runner in the interactive watch mode.

npm run cypress:run

Runs Cypress tests to completion. Before running, you need to run npm install and npm run build in the example (cd example).

npm run cypress:open

Opens the Cypress Test Runner. Before running, you need to run npm install and npm run build in the example (cd example).

License

MIT License ©. Author lempiy. Collaborator grimm.