npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

flexilexi

v0.1.22

Published

A library to facilitate dynamic and flexible searching within a dataset.

Downloads

52

Readme

flexilexi

Description

FlexiLexi is an npm package that enhances searching within datasets. It uses the Fuse.js library for fuzzy searches, allowing users to find relevant results even with partially matched queries. The package provides an interactive interface to fine-tune search settings and display filtered results seamlessly.

Features

  • Fuzzy Searching: Uses Fuse.js for flexible searches within datasets.
  • Adjustable Threshold: Allows users to control search sensitivity by adjusting the fuzziness threshold.
  • Dynamic Field Selection: Supports customizing search fields or uses default keys.
  • Search Input: Allows dynamic entry of search queries.
  • Real-time Updates: Updates search results instantly as users type or modify their queries.
  • Shows results in an unordered list.
  • Supports customization by displaying selected fields for each result.

Demo

Repo

GitHub

Requirement

  • Svelte 5
  • Fuse.js

License Information

MIT

Installation

npm i -D flexilexi // npm
pnpm i -D flexilexi  // pnpm
yarn add -D flexilexi // yarn

Usage

<script>
  import dictionary from './data/example-data.json'
  import {FlexiLexi} from 'flexilexi'
</script>

<div class="wrapper">
  <h1 class="text-4xl">Japanese dictionary</h1>
  <h2 class="text-3xl">You can search Japanese, Romaji, and English.</h2>
  <FlexiLexi {dictionary} />
</div>

<style>
  .wrapper {
    text-align: center;
  }
</style>

Props

The FlexiLexi component accepts the following props:

dictionary: (Required)

A dataset for performing searches. This should be a link to a file or an array/object that represents the dataset. Use an array of objects or an object as the following examples.

example-data.json:

[
  {
    "key-1": "value-1",
    "key-2": "value-2",
    "key-3": "value-3"
  },
  {
    "key-1": "value-4",
    "key-2": "value-5",
    "key-3": "value-6"
  },
  // more lines
]

Or an object:

{
  "key-1": "value-1",
  "key-2": "value-2",
  "key-3": "value-3",
}

keys=[]:

An optional array of strings representing the fields to search within the dataset. If specified, the search will be limited to these fields. If not provided, the default behavior is to search in all available fields.

<script>
  import dictionary from './data/example-data.json'
  import {FlexiLexi} from 'flexilexi'
  let keys = ['japanese', 'english']
</script>

<div class="wrapper">
  <h1 class="text-4xl">Japanese dictionary</h1>
  <h2 class="text-3xl">You can search Japanese and English.</h2>
  <FlexiLexi {dictionary} {keys}/>
</div>

<style>
  .wrapper {
    text-align: center;
  }
</style>

fields=[]:

An optional array of strings determining which fields from the dataset should be displayed as search results. If not specified, it defaults to the keys provided.

<script>
  import dictionary from './data/example-data.json'
  import {FlexiLexi} from 'flexilexi'
  let feilds = ['japanese', 'english']
</script>

<div class="wrapper">
  <h1 class="text-4xl">Japanese dictionary</h1>
  <h2 class="text-3xl">You can search Japanese and English.</h2>
  <FlexiLexi {dictionary} {feilds}/>
</div>

<style>
  .wrapper {
    text-align: center;
  }
</style>

thresholdValue=0:

An optional number (ranging from 0 to 1) that sets the fuzziness value for the search. A value of 0 signifies an exact match, while 1 represents the most flexible/fuzzy search.

<script>
  import dictionary from './data/example-data.json'
  import {FlexiLexi} from 'flexilexi'
</script>

<div class="wrapper">
  <h1 class="text-4xl">Japanese dictionary</h1>
  <h2 class="text-3xl">You can search Japanese and English.</h2>
  <FlexiLexi {dictionary} threshold={0.6}/>
</div>

<style>
  .wrapper {
    text-align: center;
  }
</style>

Sample data

Sample data

Styling

Use the following classes to style items in your style sheet:

  • .divclass
  • .div2class
  • .rangeLabelClass
  • .rangeInputClass
  • .searchLabelClass
  • .searchInputClass
  • .ulclass
  • .liclass

CSS

Create static/css/style.css and add the following example:

.divclass {
  margin: 1rem;
}

.rangeLabelClass {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937;
}

.rangeInputClass {
  height: 0.5rem;
  width: 30%;
  cursor: pointer;
  appearance: none;
  border-radius: 0.5rem;
  background-color: #e5e7eb;
}

.searchLabelClass {
  margin-bottom: 0.5rem;
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  color: #1f2937;
}

.searchInputClass {
  display: block;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  background-color: #f3f4f6;
  padding: 0.625rem;
  font-size: 1.25rem;
  color: #1f2937;
  width: 20rem;
  margin: auto;
}

.ulclass {
  max-width: 32rem;
  list-style-position: inside;
  list-style-type: disc;
  line-height: 1.25;
  color: #4b5563;
  text-align: left;
  width: 24rem;
  margin: auto;
}

And add the following link to app.html:

<link rel='stylesheet' href='%sveltekit.assets%/css/style.css'>

TailwindCSS

If you want to use TailwindCSS, install it using the following command:

npx svelte-add@latest tailwindcss

Update app.pcss by adding the following example:

/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;

.divclass {
  @apply m-4;
}
.rangeLabelClass {
  @apply mb-2 block text-sm font-medium text-gray-900 dark:text-white;
}
.rangeInputClass {
  @apply h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 sm:w-1/3 dark:bg-gray-700;
}
.searchLabelClass {
  @apply mb-2 block text-lg font-medium text-gray-900 dark:text-white;
}
.searchInputClass {
  @apply block rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-lg text-gray-900 focus:border-blue-500 focus:ring-blue-500 w-80 m-auto dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500
}
.ulclass {
  @apply max-w-md list-inside list-disc space-y-1 text-gray-500 dark:text-gray-400 text-left w-96 m-auto
}

@tailwind utilities;