Install the package for npm here.
This is a react component delivering a customizable Search Popup that you can use in your projects, which also adds types support using Typescript.
The project is build using React, Typescript and Tailwindcss. Tailwindcss is compiled into css, meaning you do not need it as a depedency.
All files are bundled into 3 seperate files for both cjs, esm and dts using the Rollup bundler. (commonjs, esmodules and declaration for ts types).
- ✅ Typescript support
- ✅ FULLY Customizable to your needs
- ✅ Opens as a popup.
- ✅ Animations.
- ✅ Light/dark Mode.
- ✅ Recent Searches.
- ✅ Keyboard Navigation.
Install @tryferos/dropdown using
npm install @tryferos/search@1.1.1Remember that you need to have react and react-dom already installed
npm install react@^18.0.1 react-dom@^18.0.1This package is build using react 18, you can use with different versions of react at your own risk.
npm install @tryferos/search@1.1.1 --forceImport the components
import { SearchElement } from "@tryferos/search";💬 Options & Types
placeholder?: string;
darkMode?: boolean;
shadow?: boolean;
promptSize?: string;
sections: Array<{
title: string;
items: Array<{
content: string;
title: string;
href: string;
icon?: ReactElement | string; //URLS, SVG, SVG Components
}>;
icon?: string;
iconSize?: 'small' | 'medium' | 'large';
}>;
highlight?: {
highlight?: boolean;
color?: string;
};
animation?: {
animate?: boolean;
duration?: 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6;
};
//Render a different component as a search promp to open the search popup with.
children?: ReactNode;
//
showRecent?: boolean;
openInNewTab?: boolean;
onSearch?: (query: string) => void;
keyboardNavigation?: boolean;
onOpenTrigger?: (isOpen: boolean) => void;