2.2.0 • Published 9 months ago
searchmate-js v2.2.0
This package is a vanilla javascript client for Searchmate.
Quick start
npm i searchmate-js
Once is installed you can use the package now you can import it in your code like this
import { searchmate } from "searchmate-js";
import "searchamte-js/css";
import "./style.css";
const appId = import.meta.env.VITE_PUBLIC_APP_ID;
const button = document.querySelector("#my-button");
button.addEventListener("click", () => {
searchmate({
appId: appId,
onClose: () => {
console.log("Closed");
},
});
});
Add the needed css variables to your styles.css
:root {
/* Searchmate */
/* container */
--searchmate-container-color: rgba(15, 23, 42, 0.1);
--searchmate-search-color: #fff;
/* input */
--searchmate-input-bg-color: #fff;
--searchmate-input-border-color: #f4f4f5;
--searchmate-input-text-color: #3f3f46;
--searchmate-search-icon-color: #d4d4d8;
--searchmate-input-placeholder-color: #d4d4d8;
/* results */
--searchmate-result-text-color: #3f3f46;
--searchmate-result-bg: #fafafa;
--searchmate-selected-bg: #ef4444;
--searchmate-selected-border-color: #f87171;
--searchmate-selected-color: #f8fafc;
/* footer */
--searchmate-footer-text-color: #3f3f46;
}
Dark mode
To add dark mode append the dark variables to your styles.css
:root.your-theme-dark-class {
color-scheme: dark;
/* Searchmate */
/* container */
--searchmate-container-color: rgba(15, 23, 42, 0.1);
--searchmate-search-color: #030712;
/* input */
--searchmate-input-border-color: #1f2937;
--searchmate-input-bg-color: #030712;
--searchmate-input-text-color: #d1d5db;
--searchmate-input-placeholder-color: #4b5563;
--searchmate-search-icon-color: #6b7280;
/* results */
--searchmate-result-bg: #0f172a;
--searchmate-result-text-color: #d1d5db;
--searchmate-selected-bg: #ef4444;
--searchmate-selected-border-color: #ef4444;
--searchmate-selected-color: #f8fafc;
/* footer */
--searchmate-footer-text-color: #d1d5db;
}
Overriding the default navigation
You can override the default navigation by passing a function to the overrideNavigateToResult
prop.
searchmate({
overrideNavigateToResult(path, withCtrl) {
// your custom navigation logic
console.log(path, withCtrl);
},
});
/>
1.9.0
11 months ago
1.8.0
11 months ago
1.7.0
11 months ago
1.6.0
12 months ago
1.5.0
12 months ago
1.4.0
12 months ago
1.3.0
12 months ago
2.2.0
9 months ago
2.1.0
11 months ago
2.0.0
11 months ago
1.2.0
12 months ago
1.1.2
12 months ago
1.1.1
12 months ago
1.1.0
12 months ago
1.0.2
12 months ago
1.0.1
12 months ago
1.0.0
12 months ago