{"id":23737778,"url":"https://github.com/react-querybuilder/react-querybuilder-chakra2","last_synced_at":"2026-02-09T13:33:44.254Z","repository":{"id":261476631,"uuid":"884424988","full_name":"react-querybuilder/react-querybuilder-chakra2","owner":"react-querybuilder","description":"Custom Chakra UI v2 components for react-querybuilder","archived":false,"fork":false,"pushed_at":"2025-01-14T17:33:42.000Z","size":198,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-22T00:24:29.280Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-querybuilder.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["jakeboone02"]}},"created_at":"2024-11-06T18:17:13.000Z","updated_at":"2025-01-14T17:32:45.000Z","dependencies_parsed_at":"2024-11-06T19:30:44.288Z","dependency_job_id":"c93dc5d6-c1be-4443-b914-bfe9637f505e","html_url":"https://github.com/react-querybuilder/react-querybuilder-chakra2","commit_stats":null,"previous_names":["react-querybuilder/react-querybuilder-chakra2"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/react-querybuilder/react-querybuilder-chakra2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-querybuilder%2Freact-querybuilder-chakra2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-querybuilder%2Freact-querybuilder-chakra2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-querybuilder%2Freact-querybuilder-chakra2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-querybuilder%2Freact-querybuilder-chakra2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-querybuilder","download_url":"https://codeload.github.com/react-querybuilder/react-querybuilder-chakra2/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-querybuilder%2Freact-querybuilder-chakra2/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29267006,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-09T12:53:16.161Z","status":"ssl_error","status_checked_at":"2026-02-09T12:52:30.244Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-31T08:20:00.426Z","updated_at":"2026-02-09T13:33:44.237Z","avatar_url":"https://github.com/react-querybuilder.png","language":"TypeScript","readme":"## @react-querybuilder/chakra2\n\nOfficial [react-querybuilder](https://npmjs.com/package/react-querybuilder) compatibility package for [Chakra UI version 2](https://chakra-ui.com/).\n\n\u003e [!WARNING]\n\u003e\n\u003e This package is only compatible with Chakra UI **version 2**.\n\u003e\n\u003e For Chakra UI version 3 compatibility, use [`@react-querybuilder/chakra`](https://npmjs.com/package/@react-querybuilder/chakra) \u003e= 8.\n\n- [Demo (using latest Chakra UI)](https://react-querybuilder.js.org/demo/chakra)\n- [Full documentation](https://react-querybuilder.js.org/)\n- [CodeSandbox](https://react-querybuilder.js.org/sandbox?t=chakra2) / [StackBlitz](https://react-querybuilder.js.org/sandbox?p=stackblitz\u0026t=chakra2) example projects\n\n![Screenshot](./screenshot.png)\n\n## Installation\n\n```bash\nnpm i react-querybuilder @react-querybuilder/chakra @chakra-ui/icons@2 @chakra-ui/react@2 @chakra-ui/system@2 @emotion/react @emotion/styled framer-motion\n# OR yarn add / pnpm add / bun add\n```\n\n## Usage\n\nTo configure the query builder to use Chakra-compatible components, place `QueryBuilderChakra` above `QueryBuilder` and beneath `ChakraProvider` in the component hierarchy.\n\n```tsx\nimport { ChakraProvider, extendTheme } from '@chakra-ui/react';\nimport { QueryBuilderChakra } from '@react-querybuilder/chakra';\nimport { useState } from 'react';\nimport { type Field, QueryBuilder, type RuleGroupType } from 'react-querybuilder';\n\nconst chakraTheme = extendTheme();\n\nconst fields: Field[] = [\n  { name: 'firstName', label: 'First Name' },\n  { name: 'lastName', label: 'Last Name' },\n];\n\nexport function App() {\n  const [query, setQuery] = useState\u003cRuleGroupType\u003e({\n    combinator: 'and',\n    rules: [],\n  });\n\n  return (\n    \u003cChakraProvider theme={chakraTheme}\u003e\n      \u003cQueryBuilderChakra\u003e\n        \u003cQueryBuilder fields={fields} defaultQuery={query} onQueryChange={setQuery} /\u003e\n      \u003c/QueryBuilderChakra\u003e\n    \u003c/ChakraProvider\u003e\n  );\n}\n```\n\n\u003e [!NOTE]\n\u003e\n\u003e Some additional styling may be necessary. We recommend the following:\n\u003e\n\u003e ```css\n\u003e .queryBuilder .chakra-select__wrapper {\n\u003e   width: fit-content;\n\u003e   display: inline-block;\n\u003e }\n\u003e\n\u003e .queryBuilder .chakra-input {\n\u003e   width: auto;\n\u003e   display: inline-block;\n\u003e }\n\u003e\n\u003e .queryBuilder .chakra-radio-group {\n\u003e   display: inline-block;\n\u003e }\n\u003e ```\n\n`QueryBuilderChakra` is a React context provider that assigns the following props to all descendant `QueryBuilder` elements. The props can be overridden on the `QueryBuilder` or used directly without the context provider.\n\n| Export                  | `QueryBuilder` prop             |\n| ----------------------- | ------------------------------- |\n| `chakraControlElements` | `controlElements`               |\n| `chakraTranslations`    | `translations`                  |\n| `ChakraActionElement`   | `controlElements.actionElement` |\n| `ChakraDragHandle`      | `controlElements.dragHandle`    |\n| `ChakraNotToggle`       | `controlElements.notToggle`     |\n| `ChakraValueEditor`     | `controlElements.valueEditor`   |\n| `ChakraValueSelector`   | `controlElements.valueSelector` |\n\n\u003e [!TIP]\n\u003e\n\u003e By default, this package uses icons from `@chakra-ui/icons` for button labels. To reset button labels to their default strings, use `defaultTranslations` from `react-querybuilder`.\n\u003e\n\u003e ```tsx\n\u003e \u003cQueryBuilderChakra translations={defaultTranslations}\u003e\n\u003e ```\n","funding_links":["https://github.com/sponsors/jakeboone02"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-querybuilder%2Freact-querybuilder-chakra2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-querybuilder%2Freact-querybuilder-chakra2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-querybuilder%2Freact-querybuilder-chakra2/lists"}