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 🙏

© 2025 – Pkg Stats / Ryan Hefner

github-automated-repos

v1.3.1

Published

The library, ReactJS, that gives you the power to control / automate your GitHub data, your projects on the portfolio / website, in your own GitHub in one place!

Downloads

136

Readme

GitHub NPM Paackage CodeFactor PRs Welcome


Getting Start [ 6 steps ]

1. Installation

npm

npm install github-automated-repos 

yarn

yarn add github-automated-repos

dots-horizontal-svgrepo-com (2)

2. Config. ReactQuery (ViteJS)

[!IMPORTANT] Don’t forget to configure the React Query!!! See NextJS code example. Code Example

 import { ReactQueryProvider } from 'github-automated-repos'
 createRoot(document.getElementById('root')!).render(
   <ReactQueryProvider >
     <StrictMode>
       <App />
     </StrictMode>
   </ReactQueryProvider>
   ,
  )

dots-horizontal-svgrepo-com (2)

3. Using hook ( useGitHubAutomatedRepos() )

[!CAUTION] :exclamation::exclamation: Don't forget to fill in the fields: your GitHubUsername and keyWord (chosen by you).

    import { useGitHubAutomatedRepos } from "github-automated-repos";

    const { data, isLoading, isLoadingError } = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");

dots-horizontal-svgrepo-com (2)

4. Banner

Insert banner, layout images to represent your project. Types are .PNG and .SVG. For this to be possible, the name of the image file must contain bannerin the name. Insert your images in the following path: Ex.:

└── public
      └── `bannerXYZ.png` 
      └── `bannerABC.svg` 
    ├── ...

dots-horizontal-svgrepo-com (2)

5. Choose the repositories and fill in the Topics field with the keyword you determined.

image

[!IMPORTANT] To insert stack names in the topics field, see web documentation or the table below. > Stack Icons

react-icons NET_Core_Logo mysql-logo-svgrepo-com mongo-svgrepo-com (1) linux-svgrepo-com vue Vitejs-logo typescript tailwind-svgrepo-com swift swagger-svgrepo-com (1) storybook sqlite-svgrepo-com (1) spring-svgrepo-com scala-svgrepo-com sass-svgrepo-com ruby-svgrepo-com Ruby_On_Rails_Logo react-query-seeklogo com python-svgrepo-com prisma prettier

StackIcons Table

| Logo | Stack Name | Logo | Stack Name | Logo | Stack Name | Logo | Stack Name |
| :---: | --- | :---: | --- | :---: | --- | :---: | --- |
| androidstudio | androidstudio | angular | angular | arduino | arduino | aws | aws | | babel | babel | bash | bash | bitbucket | bitbucket | blender | blender |
| bootstrap | bootstrap | c | c | canva | canva | clion | clion | | cpp | cpp | csharp | csharp | css3 | css3 | dart | dart | | denojs | denojs | django | django | docker | docker | dotnetcore | dotnetcore | | eclipse | eclipse | elixir | elixir | eslint | eslint | expo | expo | | express | express | figma | figma | firebase | firebase | flask | flask | | flutter | flutter | gatsby | gatsby | gimp | gimp | git | git | | go | go | googlecloud | googlecloud | graphql | graphql | grunt | grunt | | gulpjs | gulpjs | haskell | haskell | heroku | heroku | html5 | html5 | | husky | husky | inkscape | inkscape | java | java | javascript | javascript | | jenkins | jenkins | jest | jest | jira | jira | jquery | jquery | | jupyter | jupyter | kotlin | kotlin | kubernetes | kubernetes | laravel | laravel | | linux | linux | lua | lua | markdown | markdown | materialui | materialui | | mongodb | mongodb | mysql | mysql | nestjs | nestjs | netcore | netcore | | nextjs | nextjs | nodejs | nodejs | npm | npm | objectc | objectc | | pearl | pearl | php | php | postgresql | postgresql | prettier | prettier | | prisma | prisma | pycharm | pycharm | python | python | r | r | | rails | rails | raspberrypi | raspberrypi | react | react | reacticons | reacticons | | redux | redux | ruby | ruby | rust | rust | salesforce | salesforce | | sass | sass | scala | scala | sequelize | sequelize | spring | spring | | sqlite | sqlite | storybook | storybook | styledcomponents | styledcomponents | swagger | swagger | | switch | switch | tailwind | tailwind | typescript | typescript | visualstudio | visualstudio | | visualstudiocode | visualstudiocode | vitejs | vitejs | vuejs | vuejs | yarn | yarn |

dots-horizontal-svgrepo-com (2)

6. ✅Ready! JSON - Data from repositories chosen by you!

[!TIP] Customize your cards your way

Data Example ~ console.log(data) ~

Array(4)
0
: 
{id: 517152367, name: 'Dashgo', html_url: 'https://github.com/DIGOARTHUR/Dashgo', description: 'IGNITE - Trilha ReactJS/ - Neste projeto é aplicad…ate, Components, Props. Recursos do JS como: Map.', topics: Array(7), …}
1
: 
{id: 482667387, name: 'DashBoard-Financeiro', html_url: 'https://github.com/DIGOARTHUR/DashBoard-Financeiro', description: 'IGNITE - Trilha ReactJS/ Chapter II - Esta aplicaç…mpanhamento de valores de entrada, saída e total.', topics: Array(6), …}
2
: 
{id: 412849316, name: 'Task.TODO', html_url: 'https://github.com/DIGOARTHUR/Task.TODO', description: 'IGNITE - Trilha ReactJS/ - Este projeto aborda con…Filter e Math, Spread. E para estilização o SASS.', topics: Array(7), …}
3
: 
{id: 355616217, name: 'Move.it', html_url: 'https://github.com/DIGOARTHUR/Move.it', description: 'NLW#04 - Rocketseat - Utilizando a técnica Pomodor… o objetivo é executar a tarefa do seu interesse.', topics: Array(8), …}
length
: 
4
[[Prototype]]
: 
Array(0)

[!TIP] Customize your cards your way!

portfolio_page


About Library

This library automates the view your GitHub projects on your porfolio / website in one place. But how? Make the code configuration only once in your application with github-automated-repos, and manage the view of your projects on GitHub in the Topics field. Choose which project will be seen, and you can even customize your project card, for example, with a representative icon and show which stacks were used. All in one place!

| Control your projects | | :-------------------------------------------------------------------: | | Control your Projects |

| Customize and represent through icons. | | :--------------------------------------------------------------: | | Customize and represent through icons|

| In one place | | :-------------------------------------------------------------------: | | In one place|


Import Library   

The github-automated-repos library imports 4 resources: hook useGitHubAutomatedRepos, ReactQueryProvider , StackIcons component and StackLabels component.

import { useGitHubAutomatedRepos, ReactQueryProvider, StackIcons, StackLabels } from 'github-automated-repos';

The package imports 4 elements:

  • ReactQueryProvider tool used to optimize the requirements of the API. Don’t forget to set it up! Code Example

  • useGitHubAutomatedRepos hook responsible for automating the return of data from repositories. This hook takes two parameters: GitHubUsername & keyword. The return is an array of objects containing 7 properties: id, banner, html_url, homepage, topics, name and description.

    const { data, isLoading, isLoadingError } = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");
    • return data example:

    [
    {
        banner:"https://raw.githubusercontent.com/DIGOARTHUR/github-automated-repos/main/src/assets/images/banner.png"
        description: "The library that automates, in one place, the administration of your github projects on your website."
        homepage: "https://github-automated-repos.vercel.app"
        html_url: "https://github.com/DIGOARTHUR/github-automated-repos"
        id: 585693873
        name: "github-automated-repos"
        topics: (8) ['automated', 'deploy', 'github', 'library', '
    }
    ]
    • isLoading: while the data is not loaded, isLoading returns TRUE.

        if (isLoading) {
           return <div> loading...</div>
         }
    • isLoadingError: will be true if the query failed while fetching for the first time.

  • StackIcons The component returns, based on the iteration of the topic array that is contained in data, icons of the stacks used in your project. Enter the stacks used in your repository's topic field.. Check the Stack Icons tab!

     data?.map((item) => {
         return (
        ...
        {item.topics.map((icon, index) => {
             return (
               <StackIcons key={index} itemTopics={ icon } className={ } />
        }
        ...
    • Render component StackIcons example:

react-iconsNET_Core_Logo mysql-logo-svgrepo-com mongo-svgrepo-com (1) linux-svgrepo-com vue Vitejs-logo typescript tailwind-svgrepo-com swift swagger-svgrepo-com (1) storybook sqlite-svgrepo-com (1) spring-svgrepo-com scala-svgrepo-com sass-svgrepo-com ruby-svgrepo-com Ruby_On_Rails_Logo react-query-seeklogo com python-svgrepo-com prisma prettier

  • StackLabels component returns, based on the iteration of the topics array that is contained in data, labels of the stacks used in your project. Insert the stacks used in the topics field of your repository. Check the Stack Icons tab!

       data.map((item) => {
         return (
        ...
        {item.topics.map((icon, index) => {
             return (
               <StackLabels key={ index } itemTopics={ icon } className={ } />
        }
        ...
         
    • Render component StackLabels example:


Fill in the fields in the github repository

[!IMPORTANT] Pay attention to filling in each field of your repository on GitHub.

Example Cards Porftolio github-automated-repos

  • banner: this property returns a .PNG e .SVG image. For this to be possible, the name of the image file must contain bannerin the name. Insert your images in the following path: Ex.:
└── public
      └── `bannerXYZ.png` 
      └── `bannerABC.svg` 
    ├── ...
  • id: repository identification number. Used as parameter in the key tag. ( This field does not need to be filled in. )

  • html_url: repository link. Used as the link of access. ( This field does not need to be filled in. )

  • homepage: it's the access link to the built page, page deploy. About / Website of your GitHub.

  • topics: array that brings information about the icons in Stack Icons. Used in both StackLabels e StackIcon components. It is in this field that is passed the key configured in the hook. Refers to the field About / Topics of your GitHub.
  • name: this is the name of the repository. Refers to the field Settings / General / Repository name of your GitHub.
  • description: this is the description given to your repository. Refers to the About /Description field of your GitHub.

Code Example

React Query Config.

ViteJS main{.tsx/.jsx}

Import ReactQueryProvider component < main.tsx > - TOP OF THE CODE

  import { ReactQueryProvider } from 'github-automated-repos'

Use the ReactQueryProvider component < main.tsx >

createRoot(document.getElementById('root')!).render(

  <ReactQueryProvider>
    <StrictMode>
      <App />
    </StrictMode>
  </ReactQueryProvider>

  ,
)

NextJS layout{.tsx/.jsx}

[!IMPORTANT] If the app does not work, type the 'use client;' at the top of the page.tsx file and layout.tsx.

Import ReactQueryProvider component < layout.tsx > - TOP OF THE CODE

  'use client';
  import { ReactQueryProvider } from "github-automated-repos";

Use the ReactQueryProvider component < layout.tsx >

  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <ReactQueryProvider>
          {children}
        </ReactQueryProvider>
      </body>
    </html>
  );
}

dots-horizontal-svgrepo-com (2)

App{.tsx/.jsx} or Page{.tsx/.jsx}

[!CAUTION] :exclamation::exclamation: Don't forget to fill in the fields: your GitHubUsername and keyWord (determined by you).

 const { data, isLoading, isLoadingError } = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");

[!IMPORTANT] If the NextJS app does not work, type the 'use client;' at the top of the page.tsx file and layout.tsx.

TOP OF THE CODE < page.tsx >


  //'use client';
  import { StackIcons, StackLabels, useGitHubAutomatedRepos } from "github-automated-repos";

INSIDE IN FUNCTION < page.tsx >

  {/*CSS STYLE <can be remove after>*/ }

  const styleCSS: { [key: string]: React.CSSProperties } = {
    div: {
      display: 'flex',
      alignItems: 'center',
      flexDirection: 'column'
    },
    logo: {
      width: '60rem',
    },
    section: {
      display: 'flex',
      alignItems: 'center',
      flexDirection: 'column',
      marginBottom: '100px',

    },
    name: {
      fontSize: '30px',
      fontFamily: 'cursive'
    },
    bannerDiv: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      gap: "2px",

    },
    banner: {
      width: "250px"
    },
    componentsDiv: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      gap: "10px"
    },

    description: {
      width: '700px'
    },
    LinksDiv: {
      display: 'flex',
      gap: '10px',
      fontWeight: '500',
      color: '#646cff',
      textDecoration: 'inherit',
    }

  }



  {/* ---------- HOOK ------ */ }
  const { data, isLoading } = useGitHubAutomatedRepos("GitHubUsername", "KeyWord");

  if (isLoading) {
    return <div> loading...</div>
  }


  return (
    <div style={styleCSS.div}>
      <img style={styleCSS.logo} src='https://github.com/user-attachments/assets/bb8f5688-6896-4e42-ac91-81f93fbeece0'></img>
      {
        data?.map((item, index) => {

          return (
            <section style={styleCSS.section} key={index}>

              {/*Name / Title*/}
              <h2 style={styleCSS.name}>{item.name}</h2>

              {/*Banner*/}
              <div style={styleCSS.bannerDiv}>
                {
                  item.banner.map((item, index) => {
                    return (
                      <img style={styleCSS.banner} key={index} src={item}></img>
                    )
                  })
                }
              </div>

              {/*Topics - Components StackIcons & StackLabels*/}
              <div style={styleCSS.componentsDiv}>
                {item.topics.map((icon, index) => {
                  return (
                    <div key={index}>
                      <StackIcons className="stack_Icon" itemTopics={icon} />
                      <StackLabels className="stack_Label" itemTopics={icon} />
                    </div>
                  )
                })}
              </div>

              {/*Description*/}
              <p style={styleCSS.description} >{item.description}</p>


              <div style={styleCSS.LinksDiv}>
                {/*Homepage*/}
                <a href={item.homepage}>
                  <h3>🔗Homepage</h3>
                </a>

                {/*html_url*/}
                <a href={item.html_url}>
                  <h3>🔗Repository</h3>
                </a>

              </div>

            </section>

          )
        })
      }
    </div>
  );

Love github-automated-repos? Give our repo a star ⭐ ⬆️ .

based in: Api Github

by: @digoarthur