joy-query-box

A react-text-box component which will transform simple expression as free-text to object

Operators

Operators	Meaning	Property Name
=/equal	Equal	$eq
>	Greater than	$gt
>=	Greater than or equal	$gte
<	Less than	$lt
<=	Less than or equal	$lte
like	Like	$like
contains	Contains	$contains
startwith	StartWith	$startWith
&	And	$and
|	Or	$or

Features

• Syntax highlight
• Auto-complete on typing
• Result as object.
• Speech to text (ex. quantity greater than or equal 18)

Next update

• Support more operators is, in, between (1.1.x)
• Filter completions operator based on primary types: number, date, string (1.1.x)
• Filter completions based on a variable name & it's options (1.2.x)
• Support complex expression (1.3.x)

NPM Install & use

npm i joy-query-box

import QueryBox from 'joy-query-box';
...
const suggessionwords = [
    {
        word: 'company',
        desc: 'Field: company name'
    },
    {
        word: 'email',
        desc: 'Field: Company Email'
    },
    {
        word: 'vat',
        desc: 'Field: Company VAT number'
    }
];

<QueryBox
    words={suggessionwords}
    onSearch={this.handleOnSeach}
    queryText={"defaultText = 'a text value'"}
/>

Run demo

$ git clone https://github.com/TamVoMinh/joy-query-box.git
$ cd joy-query-box 
$ npm install
$ yarn start

Build component

yarn build:component

Note

joy-query-box use bootstrap as default style.