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-github-activity-feed

v3.0.3

Published

Turn-key Github activity feed React component. Great for portfolio sites of sporadic open-source developers.

Downloads

18

Readme

react-github-activity-feed

GitHub license npm downloads npm version npm type definitions Storybook GitHub issues GitHub Workflow Status

Turn-key Github activity feed React component. Great for portfolio sites of sporadic open-source developers.

demo animation

Storybook Demo & Docs available here

Most of the credit goes to @caseyscarborough for his work on github-activity-feed

Install

yarn add react-github-activity-feed
# or
npm i --save react-github-activity-feed

QuickStart

import { GithubActivityFeed } from "react-github-activity-feed";
import "react-github-activity-feed/light.css"
//  or "react-github-activity-feed/dark.css"

const MyGithubActivity = () => (
    <GithubActivityFeed
        user="callumjhays"
        repo="react-github-activity-feed"
        limit={20}
    />
);

Requires react >= v16.8 for functional components & hooks. If you need older version support please post a quick github issue and I'll get around to it.

Why

Like react-github-activity, I was inspired by github-activity-feed but wanted a simpler way to include it in a react app.

I also wanted to publish my first npm react component package and try out Rollup and hosting storybook demos on github.io.

Unlike react-github-activity, rather than starting from scratch (maybe because he wanted support for private events), I just "react-ified" the original library. I also wanted to try avoiding littering the global JS namespace, so I manually copied and edited the source-code.

Limitations

  • Limited by github REST api request rate (currently 60/hour). After this, the component will display an error.
  • Very bloated (added 160kB) to my next.js production build. Unsure why this