Databit Filters

Appearance

Getting started ​

Vanilla ​

Base package, no framework required. If you use a framework like React or Vue then one of the framework packages will be better suited for you:

If you use anoher framework that is not currently supported (like Qwik) then you can also use the base package.

Install the base package:

sh
$ npm install @databit/filters
sh
$ pnpm install @databit/filters

Import the styles either in Typescript or CSS:

ts
import "@databit/filters/index.css";
css
@import "@databit/filters/index.css";

Import the component and run it:

ts
import { createDatabitFilters } from "@databit/filters";

const rootEl = document.querySelector("#root")!;

// props are not required, but you won't do much without them :)
const filters = createDatabitFilters(rootEl, {
  // ...props
});

// to update props
filters.updateProps({
  // ...new props
});

// dispose after using
filters.dispose();

React ​

Install the package:

sh
$ npm install @databit/filters-react
sh
$ pnpm install @databit/filters-react
tsx
import { DatabitFilters } from "@databit/filters-react";

export function MyComponent() {
  // you can use the same props here as in base package
  return <DatabitFilters placeholder="hello" />;
}
css
@import "@databit/filters-react/index.css";

Vue ​

Install the package:

sh
$ npm install @databit/filters-vue
sh
$ pnpm install @databit/filters-vue
vue
vue
<script setup lang="ts">
  import { DatabitFilters } from "@databit/filters-vue";
</script>

<!-- you can use the same props here as in base package -->
<template>
  <DatabitFilters placeholder="hello" />;
</template>

<style>
  @import url("@databit/filters-vue/index.css");
</style>

Solid ​

Install the package:

sh
$ npm install @databit/filters-solid
sh
$ pnpm install @databit/filters-solid
tsx
import { DatabitFilters } from "@databit/filters-solid";

export function MyComponent() {
  // you can use the same props here as in base package
  return <DatabitFilters placeholder="hello" />;
}
css
@import "@databit/filters-solid/index.css";

Svelte ​

Install the package:

sh
$ npm install @databit/filters-svelte
sh
$ pnpm install @databit/filters-svelte
svelte
<script lang="ts">
  import { DatabitFilters } from "@databit/filters-svelte";
</script>

<!-- you can use the same props here as in base package -->
<DatabitFilters placeholder="hello" />;
css
/*
  In svelte don't use the component <style> tag
  as it interprets global styles badly
  and your component will be unstyled
*/
@import "@databit/filters-svelte/index.css";

Angular ​

Install the package:

sh
$ npm install @databit/filters-angular
sh
$ pnpm install @databit/filters-angular
angular
ts
import { Component } from '@angular/core';
import { DatabitFilters } from "@databit/filters-angular";

@Component({
  selector: 'my-component',
  imports: [DatabitFilters],
  // you can use the same props here as in base package
  template: '<databit-filters />',
})
export class MyComponent {}