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

react-facet-filter

v0.0.9-alpha.4

Published

Smart input based facet filter for react, supports autocomplete.

Downloads

44

Readme

build status bitHound Score Dependency Status

Synopsis

An advanced input filter that gets out of your way while still providing powerful autocomplete functionality.

Code Example

 <Filter
    filters={this.state.filters}
    categories={this.state.categories}
    operators={this.state.operators}
    options={this.state.options}
    conditions={this.state.conditions}
    onAddFilter={this.onAddFilter}
    onRemoveFilter={this.onRemoveFilter}
    onFiltersChange={this.onFiltersChange}
    fetchOptions={this.fetchOptions}
    loading={this.state.loading}
    threshold={2}
    noRepeat={false}
  />

Motivation

Most filtering solutions hijack your ability to just type in your preferred format, this makes no assumptions but provides sane defaults.

Installation

npm install react-facet-filter

Tests

npm test

Contributors

https://github.com/zsherman

License

MIT.

Common Tasks

  • Developing - npm start - Runs the development server at localhost:8080 and use Hot Module Replacement. You can override the default host and port through env (HOST, PORT).
  • Creating a version - npm version <x.y.z> - Updates /dist and package.json with the new version and create a version tag to Git.
  • Publishing a version - npm publish - Pushes a new version to npm and updates the project site.

Testing

The test setup is based on Karma/Mocha/Chai/Phantom. Code coverage report is generated through istanbul/isparta to build/.

  • Running tests once - npm test
  • Running tests continuously - npm run test:tdd
  • Running individual tests - npm test -- - Works with test:tdd too.
  • Linting - npm run test:lint - Runs ESLint.

Documentation Site

The boilerplate includes a GitHub Pages specific portion for setting up a documentation site for the component. The main commands handle with the details for you. Sometimes you might want to generate and deploy it by hand, or just investigate the generated bundle.

  • Building - npm run gh-pages - Builds the documentation into ./gh-pages directory.
  • Deploying - npm run deploy-gh-pages - Deploys the contents of ./gh-pages to the gh-pages branch. GitHub will pick this up automatically. Your site will be available through *.github.io/`.
  • Generating stats - npm run stats - Generates stats that can be passed to webpack analyse tool. This is useful for investigating what the build consists of.

Highlighting Demo for the Site

var a = 5;
var b = 10;

// just trying out code highlighting feature here
console.log(a + b);

License

Available under MIT.