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

@0xernesto/react-widget-example

v1.1.1

Published

Example React widget library published as @0xernesto/react-widget-example.

Downloads

1

Readme

React Widget Example

Static Badge GitHub Workflow Status (with event) Latest npm version

Overview

This project is an example of how to create an embeddable React widget. Technically, this is a React component library, but the only export is MyWidget. The output package is framework-agnostic, which means it can be used by third-party apps, regardless of the React framework they use (Create-React-App, Next.js, etc). This project was largely inspired by the Uniswap Swap Widget.

The output package is published as @0xernesto/react-widget-example.

Development Tools Used

  • Language: Typescript
  • Bundler: Rollup
  • Formatter: Prettier
  • Linter: ESLint
  • Styling: TailwindCSS
  • Testing: Jest

MyWidget

MyWidget is a simple counter widget that consists of a container (blue outline), an "Increase count!" button, and a text element that displays the decimal and hexadecimal count.

Below is a screenshot of a Next.js 13 app that uses MyWidget. The red container is part of the app, and the blue container is part of the widget.

nextjs_app_example

Figure 1: Next.js 13 app using MyWidget.

Contributing

  • On a new branch, open a PR for a particular set of changes.
  • Name the PR according to Conventional Commits guidelines.
  • All commits must be related to the PR name and commit messages must follow Conventional Commits guidelines.
  • To make the enforcement of these guidelines easier, husky, commitlint, commitizen, and GitHub Actions have been configured for this project.
  • All PRs must be squashed and merged to keep a clean history on the main branch.

When making git commits, run the folowing command instead of git commit, and follow the instrucitons.

npm run commit

Publishing

This project is set up to publish the package via GitHub Actions, only after a new release has been created. If this is the first time the package is published, the following command should be used:

npm publish --access public

After the package has been published for the first time, the following is an example step-by-step process for publishing new releases.

NOTE: NPM_TOKEN must be obtained from your npm account and added to the repo's GitHub Actions secrets. GH_TOKEN needs to be generated in your GitHub settings and added to the repo's GitHub Actions secrets. GITHUB_TOKEN is a special secret that is automatically created for the repo, so there is no need to explicitely define it anywhere.

  1. On your local machine, create a new local branch - for example, fix_for_the_bug.
git checkout -b fix_for_the_bug
  1. Make code changes and commit as necessary.
git add -A
npm run commit

Follow the commitizen prompts, and the final commit message should be something like fix: "fix part 1 of 5 of the bug"

  1. Push the branch to the remote GitHub repo.
git push origin fix_for_the_bug
  1. Create a new pull request from the fix_for_the_bug branch, review the code, and address any changes necessary. Make sure the pull request name follows Conventional Commits guidelines.

  2. After the changes have been reviewed, the PR can be squashed and merged to the main branch. This will trigger the GitHub Action workflow that publishes the new release.

The process above ensures that the code in the main branch always reflects that latest package version, and also keeps package versions consistent between npm and GitHub Packages.

Semantic Versions Overview

The default values for these prefixes are defined in the .releaserc.js file.

| Prefix | Version Bump | Description | | ---------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | feat | Minor | A new feature is introduced to the application (e.g., version bump from 1.0.0 to 1.1.0). | | fix | Patch | A bug fix in the codebase (e.g., version bump from 1.0.0 to 1.0.1). | | docs | No bump | Documentation only changes, no version bump. | | style | No bump | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc), no version bump. | | refactor | No bump | A code change that neither fixes a bug nor adds a feature, no version bump. | | perf | Patch | A code change that improves performance (e.g., version bump from 1.0.0 to 1.0.1). | | test | No bump | Adding missing tests or correcting existing tests, no version bump. | | build | No bump | Changes that affect the build system or external dependencies (e.g., gulp, broccoli, npm), no version bump. | | ci | No bump | Changes to CI configuration files and scripts (e.g., Travis, Circle, BrowserStack, SauceLabs), no version bump. | | chore | No bump | Other changes that don't modify src or test files, no version bump. | | revert | Varied | Reverts a previous commit, the bump depends on the reverted change (e.g., if a feature is reverted, a minor version bump down). The default bump for revert is Minor. |

License

This project is released under the MIT License - see the LICENSE.md file for details.