@ant-extensions/searchbar

Ant React Extended - Kibana styled searchbar

Usage no npm install needed!

<script type="module">
  import antExtensionsSearchbar from 'https://cdn.skypack.dev/@ant-extensions/searchbar';
</script>

README

Ant Extensions - Search Bar

Kibana style searchbar with filters

Install

# Using npm
npm install @ant-extensions/searchbar

# Using yarn
yarn add @ant-extensions/searchbar

Basic Usage

import React, { useState } from "react";
import { SearchBar } from "@ant-extensions/searchbar";

export const Tester = () => {
  return <SearchBar collapsed={false} filters={[]} fields={[]} emptyField={"Message when fields list is empty"} />;
};

import React, { useState } from "react";
import { FilterBar } from "@ant-extensions/searchbar";

export const Tester = () => {
  return <FilterBar filters={[]} fields={[]} emptyField={"Message when fields list is empty"} />;
};

Provide a default time filter { isTimeField: true, isRequired: true } to enable time input

FieldSelect Select input for fields, to maintain consistency throughout the application

import React, { useState } from "react";
import { Form } from "antd";
import { FieldSelect } from "@ant-extensions/searchbar";

export const Tester = () => {
  return (
    <Form.Item name="field">
      <FieldSelect value={"fieldKey"} onChange={(fieldKey) => "do something"} fields={[]} />;
    </Form.Item>
  );
};