Getting Start [ 6 steps ]

1. Installation

npm install github-automated-repos

yarn add github-automated-repos

2. Config. ReactQuery (ViteJS)

Important

Don’t forget to configure theReact Query!!! See NextJS code example.Code Example

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

3. Using hook ( useGitHubAutomatedRepos() )

Caution

❗❗ 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");

4. Banner

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

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

Important

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

StackIcons Table

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

Tip

Customize your cards your way

About Library

Import Library   

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

Fill in the fields in the github repository

Important

Pay attention to filling in each field of your repository on GitHub.

Code Example

React Query Config.

ViteJSmain{.tsx/.jsx}

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

createRoot(document.getElementById('root')!).render(<ReactQueryProvider><StrictMode><App/></StrictMode></ReactQueryProvider>,)

NextJSlayout{.tsx/.jsx}

Important

If the app does not work, type the'use client;' at the top of thepage.tsx file andlayout.tsx.

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

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

App{.tsx/.jsx} orPage{.tsx/.jsx}

Caution

❗❗ Don't forget to fill in the fields: your GitHubUsername and keyWord (determined by you).

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

Important

If theNextJS app does not work, type the'use client;' at the top of thepage.tsx file andlayout.tsx.

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

{/*CSS STYLE <can be remove after>*/}conststyleCSS:{[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(<divstyle={styleCSS.div}><imgstyle={styleCSS.logo}src='https://github.com/user-attachments/assets/bb8f5688-6896-4e42-ac91-81f93fbeece0'></img>{data?.map((item,index)=>{return(<sectionstyle={styleCSS.section}key={index}>{/*Name / Title*/}<h2style={styleCSS.name}>{item.name}</h2>{/*Banner*/}<divstyle={styleCSS.bannerDiv}>{item.banner.map((item,index)=>{return(<imgstyle={styleCSS.banner}key={index}src={item}></img>)})}</div>{/*Topics - Components StackIcons & StackLabels*/}<divstyle={styleCSS.componentsDiv}>{item.topics.map((icon,index)=>{return(<divkey={index}><StackIconsclassName="stack_Icon"itemTopics={icon}/><StackLabelsclassName="stack_Label"itemTopics={icon}/></div>)})}</div>{/*Description*/}<pstyle={styleCSS.description}>{item.description}</p><divstyle={styleCSS.LinksDiv}>{/*Homepage*/}<ahref={item.homepage}><h3>🔗Homepage</h3></a>{/*html_url*/}<ahref={item.html_url}><h3>🔗Repository</h3></a></div></section>)})}</div>);