[!TIP] Customize your cards your way!

• 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:

• 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:

• 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.