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

queuejs-bfs

v1.0.38

Published

A package to offer a built-in Queue data structure and Breadth First Search (BFS) method for traversing a graph for JavaScript applications.

Downloads

295

Readme

queuejs-bfs v1.0.38

This package offers Queue support for JavaScript (a language that does not have it's own built-in queue data structure), and associated libraries and frameworks. It also offers a built-in Breadth First Search (BFS) method that can be used for efficient graph node exploration.

Installation

To install, you can simply run the below command in your JavaScript, React, React Native, etc. terminal.

// using NPM
npm install queuejs-bfs

// using yarn
yarn add queuejs-bfs

Usage

After you have installed queuejs-bfs, you can import it into your JavaScript application like so.

import { Queue, bfs } from "queuejs-bfs";

Queue

Once imported, you can create a Queue instance like so.

const queue = new Queue();

queue.enqueue("A");
queue.enqueue("B");
queue.enqueue("C");

queue.print();

// > "A"
// > "B"
// > "C"

Other methods that are permitted when using a Queue are below.

  • dequeue: remove the element from the front of the queue.
  • peek: View the element at the front of the queue without removing it.
  • isEmpty: Quickly determine if the queue itself is empty.
  • size: Get the size of the queue.

bfs

To use the bfs method, you will need to provide one required argument, and then one optional argument. The required argument is a graph, the second argument is a callback function to handle the nodes/neighbors. Next is nodeAndNeighbor which is a boolean, defaulted to true, if you want the callback to handle both the node and the neighbors in the bfs method. The final, optional argument, is startNode.

The graph is an object that looks something like the below.

const graph = {
  user1: ["user2", "user3"],
  user2: ["user1", "user4", "user5"],
  user3: ["user1", "user6"],
  user4: ["user2"],
  user5: ["user2"],
  user6: ["user3"],
};

For callback you can pass a function to handle the neighbors and nodes how you want. I'll show an example in a moment.

For startNode, you can pass either a number or a string. This parameter tells the bfs method which node to start from. If left empty, it will start from the first node of the graph. See an example of bfs implementation below.

import { useEffect, useState } from "react";
import "./App.css";
import { Queue, bfs } from "queuejs-bfs";

const graph = {
  user1: ["user2", "user3"],
  user2: ["user1", "user4", "user5"],
  user3: ["user1", "user6"],
  user4: ["user2"],
  user5: ["user2"],
  user6: ["user3"],
};

function App() {
  const [userConnections, setUserConnections] = useState([]);

  useEffect(() => {
    initQueueWithBfs();
  }, []);

  const initQueueWithBfs = () => {
    let mutualConnections = [];
    bfs(
      graph,
      ({ node, neighbor }) => {
        // here we want both the node and the neighbor, so we don't pass anything for `nodeAndNeighbor`. It defaults to true.
        console.log(neighbor);
        mutualConnections.push(node);
      },
      "user1"
    );
    setUserConnections(mutualConnections);
  };

  return (
    <div className="App">
      <h1>Mutual Connections</h1>
      <ul>
        {userConnections.map((user, index) => (
          <li key={index}>{user}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

If you have your own BFS algorithm and just want a quick Queue instance, you can simply import Queue and use as need be.

Note: The full example React app can be found in the example directory on GitHub.