Version: v4

UMD build

To use the UMD build of react-querybuilder, link a <script> tag to the /dist/index.umd.js file from any version >=4.2.0 and <5.0.0, plus the UMD builds of the following dependencies:

react@17 (or @18)
react-dom@17 (or @18)
react-dnd@14 (no higher)
react-dnd-html5-backend@14 (no higher)
immer@6 (or @7/@8/@9)

Example

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React Query Builder UMD Build</title>
    <link rel="stylesheet" href="https://unpkg.com/react-querybuilder@4/dist/query-builder.css" />
  </head>
  <body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/immer@9/dist/immer.umd.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dnd@14/dist/umd/ReactDnD.min.js"></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dnd-html5-backend@14/dist/umd/ReactDnDHTML5Backend.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-querybuilder@4/dist/index.umd.js"></script>
    <script>
      const fields = [
        { name: 'firstName', label: 'First Name', placeholder: 'Enter first name' },
        { name: 'lastName', label: 'Last Name' },
      ];
      const defaultQuery = {
        combinator: 'and',
        rules: [
          { field: 'firstName', operator: '=', value: 'Steve' },
          { field: 'lastName', operator: '=', value: 'Vai' },
        ],
      };
      ReactDOM.createRoot(document.getElementById('root')).render(
        React.createElement(ReactQueryBuilder.QueryBuilder, {
          fields,
          defaultQuery,
          enableDragAndDrop: true,
        })
      );
    </script>
  </body>
</html>

Example​

Example