https://github.com/anshumanv/react-expression-builder
A React component for building function expressions with typeahead support
https://github.com/anshumanv/react-expression-builder
component expression function javascript module package react
Last synced: 10 months ago
JSON representation
A React component for building function expressions with typeahead support
- Host: GitHub
- URL: https://github.com/anshumanv/react-expression-builder
- Owner: anshumanv
- License: mit
- Created: 2020-01-19T11:09:18.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T18:52:59.000Z (almost 3 years ago)
- Last Synced: 2025-02-26T18:51:24.822Z (10 months ago)
- Topics: component, expression, function, javascript, module, package, react
- Language: TypeScript
- Homepage: https://react-expression-builder.netlify.app
- Size: 1.75 MB
- Stars: 29
- Watchers: 3
- Forks: 4
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
react-expression-builder
A bare-bones react component to build function expressions with your data.
### Features
- Typeahead support
- Full keyboard navigation and deletion
- Easy custom styling as per input
- Input validation at granular level
- Customizable options
- Single Dependency, no bloat
### Installation
Install the package -
```sh
npm i react-expression-builder
OR
yarn add react-expression-builder
```
### Usage
```js
import ExpressionBuilder from 'react-expression-builder'
//1. accumulate your options
// fn must have an additional property 'params' - eg `params: ['dim', 'delimiter', 'occurrence_number']`
const options = [{..., key: '...', type: '...', label: '...',...}, {...}]
// regex to match entires within ""
const stringRegex = /"([^\\"]|\\")*"/
// Optional - Function called on every state change, store your changes on the server
const onChangeFn = editorState => console.log(editorState, editorState.buildExpression())
// Optional - class for the expression element, use for optional styling
const expressionRootClass = 'root-class'
// Optional - class for the input container
const expressionInputClass = 'input-class'
// Optional - Function which validates all the input values and returns a bool.
const validationFn = val => {
return !isNaN(val) || stringRegex.test(val)
}
```
### Data Structure
Uses an N-Ary tree to store/manipulate the expression data, simple recursive function gives you the complete string. You can check [DataStructure.ts](https://github.com/anshumanv/react-expression-builder/blob/master/src/utils/DataStructure.ts) for the simple implementation, if curious.
Note - This only gives the skeleton and functionality, styling is upto the user, you can either make use of respective classes or wrap this component in a CSS-in-JS solution. For example, a nicely styled solution would look somewhat like [this](https://knitui.design/?path=/story/extractor--basic). This is not complete yet, need more work. Meanwhile, suggestions are appreciated.
## Author
[Anshuman Verma](https://github.com/anshumanv)
[
](https://twitter.com/Anshumaniac12)
[
](https://linkedin.com/in/anshumanv12)
[
](https://www.facebook.com/anshumanv12)
[
](https://www.paypal.me/AnshumanVerma)
## Contribute
Found a bug, please [create an issue](https://github.com/anshumanv/react-expression-builder/issues/new)
## License
[](https://github.com/anshumanv/react-expression-builder/blob/master/LICENSE)
> © Anshuman Verma