Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
1. njt
njt (npm jump to): a quick navigation tool for npm packages
🐸 njt 🐸
🐸 npm jump to 🐸
njt.vercel.app
Do you type package names in your search engine and then navigate to their source, homepage, changelog and so on? 🕐🕑🕒🕓🕔
Save five seconds thousands of times by quickly jumping to the right URL:
🐸✨🐸✨🐸
njt <package> [destination]
🐸✨🐸✨🐸
Available destinations
-
b→ package cost estimation on bundlephobia.com -
c→ changelog -
g→ github (gitlab, etc.) repository root -
h→ homepage (aliased aswfor website ordfor docs) -
i→ issues -
n→ package info on npmjs.com -
p→ pull requests (aliased asmfor merge requests) -
r→ list of github releases -
s→ source (often same as repository root, but can be its subdirectory in case of a monorepo) -
t→ list of git tags -
u→ package contents preview on unpkg.com -
v→ list of package versions with dates on npmjs.com -
y→ package page on…
2. zx
A tool for writing better scripts. Bash is great, but when it comes to writing scripts. JavaScript is a perfect choice, but standard Node.js library requires additional hassle before using. The zx package provides useful wrappers around child_process, escapes arguments and gives sensible defaults.
zx
#!/usr/bin/env zx
await $`cat package.json | grep name`
const branch = await $`git branch --show-current`
await $`dep deploy --branch=${branch}`
await Promise.all([
$`sleep 1; echo 1`,
$`sleep 2; echo 2`,
$`sleep 3; echo 3`,
])
const name = 'foo bar'
await $`mkdir /tmp/${name}`
Bash is great, but when it comes to writing more complex scripts,
many people prefer a more convenient programming language.
JavaScript is a perfect choice, but the Node.js standard library
requires additional hassle before using. The zx package provides
useful wrappers around child_process, escapes arguments and
gives sensible defaults.
Install
npm install zx
Documentation
Read documentation on google.github.io/zx.
License
Disclaimer: This is not an officially supported Google product.
3. React Awesome Reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations
awesome-reveal
/
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
React Awesome Reveal
Tip
If you like this library, please consider supporting its creator.
React Awesome Reveal is a library for React apps written in TypeScript that adds reveal animations using the Intersection Observer API to detect when the elements appear in the viewport. Animations are internally provided by Emotion and implemented as CSS Animations to benefit from hardware acceleration.
Table Of Contents
- Features
- Installation
- Quick Start
- Supported Effects
- Custom Animations
- Intersection Observer
- Past Releases
- License
Features
- 🎁 Modern stack – It is built for modern React and supports React 18
- 🏷 TypeScript support – It is written in TypeScript to improve the DX
- 🍃 Lightweight – Very little footprint on your project
- ⚙️ Uses native APIs – Intersection Observer and CSS Animations are now supported by all browsers
- 🚀 Fast – Buttery smooth experience thanks to the use…
4. Mailwind
Use Tailwind CSS to design HTML emails.
Mailwind
Use Tailwind CSS to design HTML emails.
Tailwind makes it very easy to design websites, why not use it to design HTML emails? I've been using this for volt.fm and pikaso.me and it has made my life a lot easier.
Install
npm install -g mailwind
Usage
Design your HTML email using the Tailwind utility classes like you normally would for the web.
Then run the following command to generate the corresponding CSS file:
mailwind --input-html email.html --output-css style.css
Or run this command to generate an inlined HTML file:
mailwind --input-html email.html --output-html email-inlined.html
Options
--input-css
The path to your base CSS file. Use this if you need to write custom CSS. Defaults to style.css.
--input-html
The path to your HTML email file.
--output-css
The path to the CSS file that will be generated.
--output-html
The path to the inlined HTML file that will be generated.
--tailwind-config
The path…
5. Staticman
Staticman is a Node.js application that receives user-generated content and uploads it as data files to a GitHub and/or GitLab repository. In practice, this allows you to have dynamic content (e.g. blog post comments) as part of a fully static website.
eduardoboucas
/
staticman
💪 User-generated content for Git-powered websites
Staticman 
Static sites with superpowers
Introduction
Staticman is a Node.js application that receives user-generated content and uploads it as data files to a GitHub and/or GitLab repository. In practice, this allows you to have dynamic content (e.g. blog post comments) as part of a fully static website, as long as your site automatically deploys on every push to GitHub and/or GitLab, as seen on GitHub Pages, GitLab Pages, Netlify and others.
It consists of a small web service that handles the POST requests from your forms, runs various forms of validation and manipulation defined by you and finally pushes them to your repository as data files. You can choose to enable moderation, which means files will be pushed to a separate branch and a pull request will be created for your approval, or disable it completely, meaning that files will be pushed to the main branch automatically.
You…
6. react-spring-bottom-sheet
react-spring-bottom-sheet is built on top of react-spring and react-use-gesture. It busts the myth that accessibility and supporting keyboard navigation and screen readers are allegedly at odds with delightful, beautiful, and highly animated UIs.
stipsan
/
react-spring-bottom-sheet
Accessible ♿️, Delightful ✨, & Fast 🚀
react-spring-bottom-sheet is built on top of react-spring and react-use-gesture. It busts the myth that accessibility and supporting keyboard navigation and screen readers are allegedly at odds with delightful, beautiful, and highly animated UIs. Every animation and transition use CSS custom properties instead of manipulating them directly, allowing complete control over the experience from CSS alone.
Installation
npm i react-spring-bottom-sheet
Getting started
Basic usage
import { useState } from 'react'
import { BottomSheet } from 'react-spring-bottom-sheet'
// if setting up the CSS is tricky, you can add this to your page somewhere:
// <link rel="stylesheet" href="https://unpkg.com/react-spring-bottom-sheet/dist/style.css" crossorigin="anonymous">
import 'react-spring-bottom-sheet/dist/style.css'
export default function Example() {
const [open, setOpen] = useState(false)
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
<BottomSheet open={open}>My awesome…7. React Search Box
An autocomplete search box built with and for React.
ghoshnirmalya
/
react-search-box
🎨 An autocomplete search box built with and for React
Installation
# npm
npm i react-search-box --save
# yarn
yarn add react-search-box
Usage
import React, { Component } from "react";
import ReactSearchBox from "react-search-box";
export default class App extends Component {
data = [
{
key: "john",
value: "John Doe",
},
{
key: "jane",
value: "Jane Doe",
},
{
key: "mary",
value: "Mary Phillips",
},
{
key: "robert",
value: "Robert",
},
{
key: "karius",
value: "Karius",
},
];
render() {
return (
<ReactSearchBox
placeholder="Placeholder"
value="Doe"
data={this.data}
callback={(record) => console.log(record)}
/>
);
}
}
Props
| Prop | Description |
|---|---|
| placeholder | The placeholder text for the input box |
| data |
8. match-sorter
Simple, expected, and deterministic best-match sorting of an array in JavaScript
kentcdodds
/
match-sorter
Simple, expected, and deterministic best-match sorting of an array in JavaScript
match-sorter
Simple, expected, and deterministic best-match sorting of an array in JavaScript
The problem
- You have a list of dozens, hundreds, or thousands of items
- You want to filter and sort those items intelligently (maybe you have a filter input for the user)
- You want simple, expected, and deterministic sorting of the items (no fancy math algorithm that fancily changes the sorting as they type)
This solution
This follows a simple and sensible (user friendly) algorithm that makes it easy for you to filter and sort a list of items based on given input. Items are ranked based on sensible criteria that result in a better user experience.
To explain the ranking system, I'll use countries as an example:
-
CASE SENSITIVE EQUALS: Case-sensitive equality trumps all. These will be
first. (ex.
Francewould matchFrance, but notfrance) -
EQUALS: Case-insensitive equality (ex.
Francewould match…
9. find-up
Find a file or directory by walking up parent directories
sindresorhus
/
find-up
Find a file or directory by walking up parent directories
find-up
Find a file or directory by walking up parent directories
Install
npm install find-up
Usage
/
└── Users
└── sindresorhus
├── unicorn.png
└── foo
└── bar
├── baz
└── example.js
example.js
import path from 'node:path';
import {findUp, pathExists} from 'find-up';
console.log(await findUp('unicorn.png'));
//=> '/Users/sindresorhus/unicorn.png'
console.log(await findUp(['rainbow.png', 'unicorn.png']));
//=> '/Users/sindresorhus/unicorn.png'
console.log(await findUp(async directory => {
const hasUnicorns = await pathExists(path.join(directory, 'unicorn.png'));
return hasUnicorns && directory;
}, {type: 'directory'}));
//=> '/Users/sindresorhus'
API
findUp(name, options?)
findUp(matcher, options?)
Returns a Promise for either the path or undefined if it could not be found.
findUp([...name], options?)
Returns a Promise for either the first path…
10. mande
600 bytes convenient and modern wrapper around fetch with smart extensible defaults
mande 
Simple, light and extensible wrapper around fetch with smart defaults
Requires fetch support.
mande has better defaults to communicate with APIs using fetch, so instead of writing:
// creating a new user
fetch('/api/users', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'Dio',
password: 'irejectmyhumanityjojo',
}),
})
.then((response) => {
if (response.status >= 200 && response.status < 300) {
return response.json()
}
// reject if the response is not 2xx
throw new Error(response.statusText)
})
.then((user) => {
// ...
})
You can write:
const users = mande('/api/users')
users
.post(…Stargazing 📈
Top risers over last 7 days🔗
- Coding Interview University +2,026 stars
- Build your own X +1,285 stars
- Medusa +1,147 stars
- 30 Days of JavaScript +1,132 stars
- Awesome +1,111 stars
Top growth(%) over last 7 days🔗
- Medusa +18%
- VSCode Front Matter +14%
- Basic Computer Games +10%
- NextUI +10%
- spcss +9%
Top risers over last 30 days🔗
- Public APIs +5,786
- Coding Interview University +5,521 stars
- Awesome +4,464 stars
- NextUI +3,812 stars
- Tauri +3,319 stars stars
Top growth(%) over last 30 days🔗
- NextUI +363%
- Learn web3 Dapp +47%
- Mantine +42%
- p +39%
- Remix Auth +38%
For all for the latest rankings please checkout Stargazing.dev
Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post about HTML, CSS and JavaScript.
Top comments (2)
The link for the match-sorter is referencing a forked repository, which I think is incorrect.
Good spot, thank you. I have corrected in the list