# search-query-builder

> A component to build queries

Latest version **1.0.6** (published 2020-03-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install search-query-builder
pnpm add search-query-builder
yarn add search-query-builder
bun add search-query-builder
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2020-03-10 |
| First published | 2020-02-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 409.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ar2r_papyan |
| Keywords | search, query-builder, react |

## Links

- npm: https://www.npmjs.com/package/search-query-builder
- Repository: https://github.com/Skills-Matrix/search-query-builder
- Homepage: https://github.com/Skills-Matrix/search-query-builder#readme
- Issues: https://github.com/Skills-Matrix/search-query-builder/issues
- npm.io page: https://npm.io/package/search-query-builder

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2020-03-10
- 1.0.5 — 2020-03-06
- 1.0.4 — 2020-03-02
- 1.0.3 — 2020-02-28
- 1.0.2 — 2020-02-26
- 1.0.1 — 2020-02-25
- 1.0.0 — 2020-02-18

## README

# Search Query Builder

> a form to build queries

[![NPM](https://img.shields.io/npm/v/search-query-builder.svg)](https://www.npmjs.com/package/search-query-builder) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

### Install

```bash
npm install --save search-query-builder
```

### Usage

```jsx harmony
import React from 'react';

import SearchQueryBuilder from 'search-query-builder';

const theme = {
     primaryColor:'purple',
     secondaryColor:'black',
     accentColor:'orange',
     lightestColor:'white',
     darkestColor:'black'
};

const uiConfig = {
    addRuleButton:  {
        text: 'RULE',
        className: 'add-rule-btn',
        icon: 'plus'
    },
    addGroupButton: {
        text: 'GROUP',
        className: 'add-group-btn',
        icon: 'plus-circle'
    },
    buildButton:  {
        text: 'BUILD',
        className: 'build-btn'

    },
    resetButton:  {
        text: 'RESET',
        className: 'reset-btn'
    }
};

const mainConfig = {
       'CATEGORY': [
           {
               'type': 'option',
               'items': [
                   {
                       'name': 'First'
                   },
                   {
                       'name': 'Second'
                   },
                   {
                       'name': 'Third'
                   }
               ]
           }
       ]
};

# TBD;
const mainConfig_v2 = {
       'CATEGORY': {
            'operators': ['is', 'is not'],
            'values' :[
                 {
                     'type': 'category',
                     'items': ['First', 'Second', 'Third' ]
                 }
            ]
       }   
};

const defaultQuery = {
    condition: 'OR',
    children: [
        {
            type: 'RULE',
            name: 'CATEGORY',
            properties:{
                'option' : 'Third'
            }       
        },
        {
            type: 'RULE',
            name: 'CATEGORY',
            properties:{
                'option' : 'First'
            }       
        }
    ]
};

const conditions = ['AND', 'OR'];

const minimalMode = false;

const outputType = 'JSON';

function YourComponent() {
    return (
        <SearchQueryBuilder
            mainConfig={mainConfig} // all options is required
            uiConfig={uiConfig} // elements configuration [in progress]
            theme={theme} // colors
            minimalMode={minimalMode} // everything black and white 
            conditions={conditions} // all conditions default [AND OR]
            defaultSelectedConditionIndex={0} // selected selected condition default [0]
            defaultQuery={defaultQuery} //elements which will be selected default [none]
            outputType={outputType} // type of the parameter below default JSON [[TBD]]
            onSubmitted={builtQuery => {
                // do smth 
            }}
        />
    )
}

```

---
_Source: https://npm.io/package/search-query-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._