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

scoutbar

v1.2.3

Published

ScoutBar is a JavaScript library for developing user friendly, easy-to-use, scalable and highly customizable component for automating your navigation experience

Downloads

131

Readme

npm

NPM

See Demo On Codesandbox

See Documentation

⚡️Overview

It has been observed that users who are familiar with the CMD + K shortcut for searching and performing complex actions within applications like Slack and Workspace by Facebook are able to navigate these apps more efficiently by 21%. This highlights the value of providing users with effective search and navigation tools.

With this in mind, we are excited to introduce Scoutbar - an easy-to-install React component that automates the CMD + K experience. Scoutbar is portable and extensible, making it a convenient solution for improving the search and navigation capabilities of your application. Give your users the ability to quickly find what they are looking for and increase their productivity with Scoutbar.

🔧 Installation

You can easily install this package with yarn or npm:

$ yarn add scoutbar

or

$ npm install scoutbar

✨ Features

  • 🤘 Super easy to install
  • 📦 It's tiny, only 400b gzipped
  • 🙅‍♂️ It's got keyboard nav support
    • And keyboard shortcuts to configure specific actions
  • 🔧 Flexible API
    • A simple data structure and function helper to customize your experience
  • 💪 Fully tested, typed, and reliable
  • 🌍 Works in CommonJS, ESM, and the browser
  • 🤓 Handy helpers included
  • 🧑 Zero dependencies

📖 Usage

One of the best things about it is that it is as simple as integrating one component. you have scoutbar on your app.

import React from 'react';
import { ScoutBar } from 'scoutbar';

export default function App() {
  return (
    <div className="App">
      <ScoutBar
        actions={({ createScoutAction }) => [
          createScoutAction({
            label: 'Get Started',
            description: 'Get started with scoutbar',
            href: '/',
          }),
        ]}
      />
    </div>
  );
}

Seeing is believing! There are clear descriptions of each utility, as well as instructions on how to use them, in the documentation.

🍷 Documentation See All

tutorial

Type -> Boolean

Default -> true

Allows you the ability to disable / hide scoutbar tutorial hints. i'e the section that tells users to navigate with the arrows or tabs. e.g

  <ScoutBar
    tutorial={false}
    ...
  />

noAnimation

Type -> Boolean

Default -> false

Allows you to disable every animation on scoutbar Disables every animations on scoutbar. this is by default true if scoutbar detects that the user has requested that the system minimize the amount of non-essential motion it uses.

  <ScoutBar
    noAnimation={false}
    ...
  />

theme

Type -> 'light' | 'dark' | 'auto'

Default -> 'light'

Allows you to switch the theme of the scoutbar depending on how you want it. auto switches to the theme of the current system.

  <ScoutBar
    theme="light"
    ...
  />

acknowledgement

Type -> Boolean

Default -> true

Show the scoutbar acknowledgement logo on the top right of the input bar.

  <ScoutBar
   acknowledgement={true}
    ...
  />

brandColor

Type -> String

Default -> #000

Allows you to set the official scoutbar brand color. it helps to match the color grade on your application

  <ScoutBar
   brandColor="red"
    ...
  />

placeholder

Type -> String | String[]

Default -> ['What would you like to do today ?','What do you need?', 'Lets help you navigate'],

Allows you to switch between different placeholder texts or just a single one.

  <ScoutBar
    placeholder={[
      'What products do you need ? ',
      'Whats the name of your phone ?'
    ]}

    or

    placeholder="What do you need ?"
    ...
  />

revealScoutbar

Type -> boolean

Default -> false

Reveal the scoutbar with an external action. PS forcefully opens the scoutbar

  <ScoutBar
revealScoutbar={// your state hook here }
    ...
  />

See All Documentation

🤔Thought Process

  • https://defkey.com/what-means/command-k
  • https://www.theverge.com/2017/6/2/15475078/slack-keyboard-shortcuts-how-to-guide#:~:text=%E2%8C%98%20%2B%20K%20%2F%20Ctrl%20%2B%20K,to%20jump%20to%20that%20conversation.

Contributing

When contributing to this repository, please first discuss the change you wish to make via an issue. This can be a feature request or a bug report. After a maintainer has triaged your issue, you are welcome to collaborate on a pull request. If your change is small or uncomplicated, you are welcome to open an issue and pull request simultaneously.

Please note we have a code of conduct, please follow it in all your interactions with the project.

Running Scoutbar Locally

A local test environment has been setup for developers that wants to develop and contribute to scoutbar. to start up the dev server do the following

$ yarn install
$ yarn run dev // server running on http://localhost:3008

Linking Scoutbar Locally

Run

$ npm link

This will create a symbolic link in the /usr/local/lib/node_modules/ folder, that contains the global npm packages in the system, the ones installed using npm -g.

npm link scoutbar

Then we run this in the project we want to link scoutbar locally to

See More on contributing

🤝 License

MIT © codewonders.dev  ·  GitHub @adenekan41 / codewonders