Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-querybuilder-shadcn

Package Overview
Dependencies
Maintainers
0
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-querybuilder-shadcn

Custom Shadcn components for react-querybuilder

  • 1.0.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

Shadcn Components for React-QueryBuilder

Acknowledgments

This project stands on the shoulders of giants. A huge thank you to the React-QueryBuilder team for their incredible tool that simplifies query building. Your dedication to open source has made this library possible.

We would also like to extend our gratitude to the Shadcn team for their stunning, modern UI component framework, which serves as the foundation for this library’s visual design.

Special thanks to the creators of react-querybuilder/antd, whose implementation inspired and informed this project. Your work continues to set a high bar for quality and usability in the React ecosystem.


Features

  • Prebuilt Shadcn components designed specifically for react-querybuilder.
  • Fully customizable styling and functionality.
  • Aesthetic, modern UI with Shadcn principles at its core.

Installation

npm install react-querybuilder-shadcn react-querybuilder

Peer Dependencies

This library requires the following Radix UI primitives to be installed in your project:

  • @radix-ui/react-checkbox
  • @radix-ui/react-dialog
  • @radix-ui/react-label
  • @radix-ui/react-popover
  • @radix-ui/react-radio-group
  • @radix-ui/react-select
  • @radix-ui/react-separator
  • @radix-ui/react-slot
  • @radix-ui/react-switch

You can install them via:

npm install @radix-ui/react-checkbox @radix-ui/react-dialog @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-radio-group @radix-ui/react-select @radix-ui/react-separator @radix-ui/react-slot @radix-ui/react-switch


Usage

import { QueryBuilderShadcn } from "react-querybuilder-shadcn";
import { useState } from "react";
import {
	type Field,
	QueryBuilder,
	type RuleGroupType,
} from "react-querybuilder";

const fields: Field[] = [
	{ name: "firstName", label: "First Name" },
	{ name: "lastName", label: "Last Name" },
];

export function App() {
	const [query, setQuery] = useState<RuleGroupType>({
		combinator: "and",
		rules: [],
	});

	return (
		<QueryBuilderShadcn>
			<QueryBuilder
				fields={fields}
				defaultQuery={query}
				onQueryChange={setQuery}
			/>
		</QueryBuilderShadcn>
	);
}

Styles

This will add styles with react query layouts

import "react-querybuilder-shadcn/dist/style.css";

Exports

QueryBuilderShadcn 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.

ExportQueryBuilder prop
shadcnControlElementscontrolElements
shadcnTranslationstranslations
ShadcnActionElementcontrolElements.actionElement
ShadcnDragHandlecontrolElements.dragHandle
ShadcnNotTogglecontrolElements.notToggle
ShadcnShiftActionscontrolElements.shiftActions
ShadcnValueEditorcontrolElements.valueEditor
ShadcnValueSelectorcontrolElements.valueSelector

[!TIP]

By default, this package uses icons from lucid-react for button labels. To reset button labels to their default strings, use defaultTranslations from react-querybuilder.

<QueryBuilderShadcn translations={defaultTranslations}>

Contributing

Contributions are welcome! Feel free to submit issues or pull requests to help improve this library.

Keywords

FAQs

Package last updated on 15 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc