{"_id":"@automatrix-dms/react-query-builder","_rev":"1-dedd1ddcff1915c52bab50e88427d812","name":"@automatrix-dms/react-query-builder","dist-tags":{"latest":"1.0.0"},"versions":{"0.4.4":{"name":"@automatrix-dms/react-query-builder","version":"0.4.4","keywords":["react","query","builder","query builder","query-builder","react-query-builder","typescript","configurable"],"author":{"name":"Automatrix DMS","email":"devops@automatrix.com"},"license":"MIT","_id":"@automatrix-dms/react-query-builder@0.4.4","maintainers":[{"name":"devops-automatrix","email":"devops@automatrix.com"},{"name":"ernestoruno","email":"ernesto@automatrix.com"},{"name":"otoniel-amx","email":"otoniel@automatrix.com"},{"name":"modesto-automatrix","email":"modesto@automatrix.com"}],"homepage":"https://automatrix.com","dist":{"shasum":"504b1ab46d9415594d409fb674992a0ac4a9d7ee","tarball":"https://registry.npmjs.org/@automatrix-dms/react-query-builder/-/react-query-builder-0.4.4.tgz","fileCount":45,"integrity":"sha512-ahOuj8JfmFNEPn8hl6HW1E1NgsPSZa9GB6oEHNDaFE22ls9kWp6668A7uluDVfiVVMwrvkw8mocdglyg8BHxTg==","signatures":[{"sig":"MEQCIADyG6c2cM1etObGNONSPEGGuNgxkIt0ZNB1vtj+VaCLAiAQblUl5RL4BH1X9D2WXxtCEPsvnbBBsK0bUHnRByEyLw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":586314},"jest":{"collectCoverage":true,"setupFilesAfterEnv":["/src/setupTests.ts"],"collectCoverageFrom":["src/**/*.{ts,tsx}","!src/index.tsx","!src/**/*.{d.ts}","!**/node_modules/**","!src/test/**","!src/types/**"],"snapshotSerializers":["enzyme-to-json/serializer"]},"main":"dist/index.js","module":"dist/react-query-builder.esm.js","gitHead":"0d00750816cb16ec26468754640ab676d1d8b807","scripts":{"test":"tsdx test --env=jsdom","build":"cross-env NODE_ENV=production tsdx build --format=cjs,esm,umd","start":"cross-env NODE_ENV=production tsdx watch","lint:ts":"tslint --project tsconfig.json -c tslint.json","checkAll":"npm run prettier:check & yarn lint:ts & yarn lint:css","lint:css":"stylelint \"./src/**/*.{ts,tsx}\"","prebuild":"rimraf dist","prepublish":"npm run build","test:watch":"nmp run test -- --watchAll","test:update":"tsdx test -u --env=jsdom","prettier:check":"prettier --check src/**/*.{ts,tsx}","collect-coverage":"cat coverage/lcov.info | coveralls"},"typings":"dist/index.d.ts","_npmUser":{"name":"devops-automatrix","email":"devops@automatrix.com"},"prettier":{"semi":true,"printWidth":80,"singleQuote":true,"trailingComma":"es5"},"_npmVersion":"9.6.7","description":"Simple, highly configurable query builder for react - Fork from https://www.github.com/vojtechportes","directories":{},"_nodeVersion":"18.17.1","dependencies":{"uniqid":"^5.0.3","Builder":"^2.8.1","styled-components":"^4.3.2"},"publishConfig":{"registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{"cat":"^0.2.0","tsdx":"^0.7.2","husky":"^3.0.3","react":"^16.9.0","tslib":"^1.10.0","enzyme":"^3.10.0","tslint":"^5.18.0","uniqid":"^5.0.3","webpack":"^4.31.0","prettier":"^1.18.2","coveralls":"^3.0.6","react-dom":"^16.9.0","stylelint":"^10.1.0","typescript":"^3.5.3","@types/jest":"^24.0.17","@types/react":"^16.9.0","pretty-quick":"^1.11.1","tslint-react":"^4.0.0","@types/enzyme":"^3.10.3","@types/uniqid":"^4.1.3","enzyme-to-json":"^3.3.5","@types/react-dom":"^16.8.5","styled-components":"^4.3.2","tslint-eslint-rules":"^5.4.0","tslint-config-prettier":"^1.18.0","enzyme-adapter-react-16":"^1.14.0","@types/styled-components":"^4.1.18","awesome-typescript-loader":"^5.2.1","stylelint-config-recommended":"^2.2.0","@types/enzyme-adapter-react-16":"^1.0.5","stylelint-config-rational-order":"^0.1.2","stylelint-config-styled-components":"^0.1.1","stylelint-processor-styled-components":"^1.8.0"},"peerDependencies":{"react":"^16.9.0","react-dom":"^16.9.0"},"_npmOperationalInternal":{"tmp":"tmp/react-query-builder_0.4.4_1739477514553_0.027717582451053824","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@automatrix-dms/react-query-builder","version":"1.0.0","license":"MIT","keywords":["react","query","builder","query builder","query-builder","react-query-builder","typescript","configurable"],"description":"Simple, highly configurable query builder for react - Fork from https://www.github.com/vojtechportes","author":{"name":"Automatrix DMS","email":"devops@automatrix.com"},"homepage":"https://automatrix.com","main":"dist/index.js","module":"dist/react-query-builder.esm.js","typings":"dist/index.d.ts","publishConfig":{"registry":"https://registry.npmjs.org"},"scripts":{"test":"tsdx test --env=jsdom","test:update":"tsdx test -u --env=jsdom","test:watch":"nmp run test -- --watchAll","start":"cross-env NODE_ENV=development tsdx watch","prebuild":"rimraf dist","build":"cross-env NODE_ENV=production tsdx build --format=cjs,esm,umd","prepublish":"npm run build","collect-coverage":"cat coverage/lcov.info | coveralls","prettier:check":"prettier --check src/**/*.{ts,tsx}","lint:ts":"tslint --project tsconfig.json -c tslint.json","lint:css":"stylelint \"./src/**/*.{ts,tsx}\"","checkAll":"npm run prettier:check & yarn lint:ts & yarn lint:css"},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"devDependencies":{"@types/enzyme":"^3.10.3","@types/enzyme-adapter-react-16":"^1.0.5","@types/jest":"^24.0.17","@types/react":"^16.9.0","@types/react-dom":"^16.8.5","@types/styled-components":"^4.1.18","@types/uniqid":"^4.1.3","awesome-typescript-loader":"^5.2.1","cat":"^0.2.0","coveralls":"^3.0.6","enzyme":"^3.10.0","enzyme-adapter-react-16":"^1.14.0","enzyme-to-json":"^3.3.5","husky":"^3.0.3","prettier":"^1.18.2","pretty-quick":"^1.11.1","react":"^16.9.0","react-dom":"^16.9.0","styled-components":"^4.3.2","stylelint":"^10.1.0","stylelint-config-rational-order":"^0.1.2","stylelint-config-recommended":"^2.2.0","stylelint-config-styled-components":"^0.1.1","stylelint-processor-styled-components":"^1.8.0","tsdx":"^0.7.2","tslib":"^1.10.0","typescript":"^3.5.3","uniqid":"^5.0.3","tslint":"^5.18.0","tslint-config-prettier":"^1.18.0","tslint-eslint-rules":"^5.4.0","tslint-react":"^4.0.0","webpack":"^4.31.0"},"peerDependencies":{"react":"^16.9.0","react-dom":"^16.9.0"},"dependencies":{"Builder":"^2.8.1","uniqid":"^5.0.3","styled-components":"^4.3.2"},"jest":{"collectCoverage":true,"setupFilesAfterEnv":["/src/setupTests.ts"],"snapshotSerializers":["enzyme-to-json/serializer"],"collectCoverageFrom":["src/**/*.{ts,tsx}","!src/index.tsx","!src/**/*.{d.ts}","!**/node_modules/**","!src/test/**","!src/types/**"]},"gitHead":"0d00750816cb16ec26468754640ab676d1d8b807","_id":"@automatrix-dms/react-query-builder@1.0.0","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-MEMcj6EdTogUdqzuRVzpISnho17Ug7xdUqMm4DMwqpItQeZEOPxnfLmHE72Gal5IFLav37/1kaxQAA3d+USA3Q==","shasum":"32a43d346e0110b36fcce0d2a1ef668f4ee18664","tarball":"https://registry.npmjs.org/@automatrix-dms/react-query-builder/-/react-query-builder-1.0.0.tgz","fileCount":45,"unpackedSize":586315,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICQUJk3LVUhJb90PqEkio1+iLewp7vGcAsoWXUy03izrAiEA4RZtfAW6vJs9FDJxrfzIr55Bv9K4YOAjaLpszxNKEeY="}]},"_npmUser":{"name":"devops-automatrix","email":"devops@automatrix.com"},"directories":{},"maintainers":[{"name":"devops-automatrix","email":"devops@automatrix.com"},{"name":"ernestoruno","email":"ernesto@automatrix.com"},{"name":"otoniel-amx","email":"otoniel@automatrix.com"},{"name":"modesto-automatrix","email":"modesto@automatrix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-query-builder_1.0.0_1739549381609_0.17347272470060449"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-13T20:11:54.469Z","modified":"2025-02-14T16:09:42.031Z","0.4.4":"2025-02-13T20:11:54.837Z","1.0.0":"2025-02-14T16:09:41.817Z"},"author":{"name":"Automatrix DMS","email":"devops@automatrix.com"},"license":"MIT","homepage":"https://automatrix.com","keywords":["react","query","builder","query builder","query-builder","react-query-builder","typescript","configurable"],"description":"Simple, highly configurable query builder for react - Fork from https://www.github.com/vojtechportes","maintainers":[{"name":"devops-automatrix","email":"devops@automatrix.com"},{"name":"ernestoruno","email":"ernesto@automatrix.com"},{"name":"otoniel-amx","email":"otoniel@automatrix.com"},{"name":"modesto-automatrix","email":"modesto@automatrix.com"}],"readme":"

:information_source: RFC 1.x.x

\n

Please note that right now I am planning to start working on version 1.x.x. It will involve lot of refactoring, new features and some breaking changes. I will try to introduce ways how to keep things backwards compatible though.

\n

If you are interested, check https://github.com/vojtechportes/react-query-builder/issues/37 for RFC and let me know what you think and what new features you would welcome.

\n
\n\n

\n \"React\n

\n\n

\n Simple, highly configurable query builder
for React written in TypeSript\n\n\n

\n

\n\"npm \"License: \"Travis \n\"Coverage \"DeepScan\n

\n
\n\n---\n\n- [Installation](#installation)\n- [Demo](#demo)\n- [Usage](#usage)\n- [Configuration](#configuration)\n - [Fields](#lets-start-with-fields)\n - [Field](#field)\n - [Label](#label)\n - [Type](#type)\n - [Operators](#operators)\n - [Value](#value)\n - [Data](#data)\n - [Components](#components)\n - [onChange](#onchange)\n- [Localization](#Localization)\n- [Future development](#future-development)\n\n---\n\n## Installation\n\n```bash\nnpm install @vojtechportes/react-query-builder\n```\n\nor\n\n```bash\nyarn add @vojtechportes/react-query-builder\n```\n\n## [Demo](https://react-query-builder-demo.herokuapp.com/)\n\nwith examples of field definition and custom components...
\n...or check source code on [GitHub](https://github.com/vojtechportes/react-query-builder-demo)\n\n\"React\n\n---\n\n## Usage\n\n```typescript\nimport React from 'react';\nimport {\n Builder,\n BuilderFieldProps,\n BuilderComponentsProps,\n} from 'react-query-builder';\n\nconst fields: BuilderFieldProps[] = [\n // Fields configuration\n];\n\nconst data: any = [\n // Initial query tree\n];\n\nconst components: BuilderComponentsProps = {\n // Custom components configuration\n};\n\nconst MyBuilder: React.FC = () => (\n console.log(data)}\n />\n);\n```\n\n---\n\n## Configuration\n\nSince React Query Builder is highly configurable, you can define look of the Query Builder, you can define and use your own components, set whether the Builder should be readOnly or not and of course, you will need to set up fields Query Builder will be using.\n\n### Lets start with fields...\n\n```typescript\nimport { BuilderFieldProps } from 'react-query-builder';\n\nconst fields: BuilderFieldProps[] = [\n {\n field: 'STATE',\n label: 'State',\n type: 'LIST',\n operators: ['EQUAL', 'NOT_EQUAL'],\n value: [\n { value: 'CZ', label: 'Czech Republic' },\n { value: 'SK', label: 'Slovakia' },\n { value: 'PL', label: 'Poland' },\n ],\n },\n {\n field: 'IS_IN_EU',\n label: 'Is in EU',\n type: 'BOOLEAN'\n }\n];\n```\n\nAs you can see, there are few things you can define. `field`, `label`, `type`, `operators` and `value`.\n\n#### Field\n\nField is a key and needs to be unique, since it is used to reference field in query tree as you will see further down in documentation.\n\n#### Label\n\nLabel is pretty obvious, so lets skip to type.\n\n#### Type\n\nType can be any of following constants:\n\n```\nBOOLEAN\nTEXT\nDATE\nNUMBER\nSTATEMENT\nLIST\nMULTI_LIST\nGROUP (*)\n```\n\n\\* GROUP type is not intended to be used in field props definition but only in data object.\n\n#### Operators\n\nOperator can be array of following constants\n\n```\nLARGER\nSMALLER\nLARGER_EQUAL\nSMALLER_EQUAL\nEQUAL\nNOT_EQUAL\nALL_IN\nANY_IN\nNOT_IN\nBETWEEN\nNOT_BETWEEN\nLIKE\nNOT_LIKE\n```\n\n#### Value\n\nValue can be either string (STATEMENT) or array of objects with value and label keys (LIST, MULTI_LIST). Values for other types are empty by default.\n\n### Data\n\nData can be either empty array or array of rules and groups.\n\n```Typescript\n[\n {\n \"type\": \"GROUP\",\n \"value\": \"AND\",\n \"isNegated\": false,\n \"children\": [\n {\n \"field\": \"IS_IN_EU\", // <- Type here is refering to field property in fields configuration\n \"value\": false\n }\n ]\n }\n]\n```\n\n### Components\n\nComponents is set of components you can use to customize React Query Builder. You can either just style them using [styled-components](https://www.styled-components.com/ 'styled-components') or use your own components as long as they follow typings of original components.\n\nYou can customize following componetns\n\n```\nSelect\nSelectMulti\nSwitch\nInput\nRemove\nAdd\nComponent\nGroup\nGroupHeaderOption\n```\n\nvia config object\n\n```typescript\nconst components: BuilderComponentsProps = {\n form: {\n Select: MyCustomSelect,\n SelectMulti: MyCustomSelectMulti,\n Switch: MyCustomSwitch,\n Input: MyCustomInput,\n },\n Remove: MyCustomRemove,\n Add: MyCustomAdd,\n Component: MyCustomComponent,\n Group: MyCustomGroup,\n GroupHeaderOption: MyCustomHeaderOption,\n};\n```\n\n### onChange\n\nonChange property is allowing you to retrieve query tree after every change that occures in React Query Builder.\n\n---\n\n## Localization\n\nTo either use custom strings or localize ReactBuilder, you can use strings property on Builder component.\n\nYou can work with object of following format:\n\n```typescript\nconst strings: Strings = {\n \"group\": {\n \"not\": \"Not\",\n \"or\": \"Or\",\n \"and\": \"And\",\n \"addRule\": \"Add Rule\",\n \"addGroup\": \"Add Group\",\n \"delete\": \"Delete\"\n },\n \"components\": {\n \"delete\": \"Delete\"\n },\n \"form\": {\n \"selectYourValue\": \"Select your value\"\n },\n \"operators\": {\n \"LARGER\": \"Larger\",\n \"SMALLER\": \"Smaller\",\n \"LARGER_EQUAL\": \"Larger or equal\",\n \"SMALLER_EQUAL\": \"Smaller or equal\",\n \"EQUAL\": \"Equal\",\n \"NOT_EQUAL\": \"Not equal\",\n \"ALL_IN\": \"All in\",\n \"ANY_IN\": \"Any in\",\n \"NOT_IN\": \"Not in\",\n \"BETWEEN\": \"Between\",\n \"NOT_BETWEEN\": \"Not between\"\n }\n};\n```\n\nIt is not required to translate all the strings. Strings that are not specified by you will be loaded from default strings.\n\nTo work with multiple locales, you can use for example amazing [i18next framework](https://www.i18next.com/ 'i18next framework').\n\n```typescript\nimport React from 'react';\nimport { Builder, Strings } from '@vojtechportes/react-query-builder';\nimport { Trans, useTranslation } from 'react-i18next';\n\nexport const QueryBuiler:React.FC = () => {\n useTranslation('query-builder')\n\n const strings: Strings = {\n operators: {\n LARGER: ,\n SMALLER: \n /* And so on */\n }\n };\n\n return (\n console.log(data)} \n />\n );\n};\n```\n\n#Feature development\n\nPlease check https://github.com/vojtechportes/react-query-builder/issues/37\n","readmeFilename":"README.md"}