This is a pre-styled React component for showcasing a GitHub user's projects. With Axios for API calls and Tailwind for styling, this component makes it easy to present your projects in a clean and professional manner

Overview

MyGitHub

The MyGitHub component is a pre-styled React component for displaying a GitHub user's projects and other informations. With just one import, you can easily display your projects with a clean and professional look. This component makes use of the GitHub API to fetch a user's projects and Axios for making HTTP requests. It is styled using Tailwind CSS to provide a modern and responsive design. Whether you're building a personal portfolio or creating a project showcase for a team, this component will help you present your projects in a polished and organized manner.

Live Demo

You can see a live demo of the MyGitHub component here. This demo showcases the component in action and demonstrates the various styling options available.

Installation

Before using the MyGitHub component, you'll need to have Axios installed in your project. You can install Axios using npm: npm install axios

Once Axios is installed, you can install the MyGitHub component: npm install MyGitHub

Usage

To use the MyGitHub component, simply import it into your project and pass in the GitHub username and personal access token as props. Your personal access token is required to authenticate your request to the GitHub API.

import MyGitHub from 'MyGitHub';

<MyGitHub 
  username="your-github-username" 
  token="your-github-token" 
/>

GitHub Personal Access Token

To get your GitHub personal access token, you can follow these steps:

1. Go to your GitHub Settings and click on Developer Settings.
2. Click on Personal access tokens.
3. Click on Generate new token. 
4. Give your token a descriptive name, select the necessary permissions, and then click on Generate token.

Your personal access token will be displayed only once, so make sure to copy it and store it securely.

Props

The MyGitHub component accepts the following props:

  • username (required): the GitHub username to display projects for. This should be a string.
  • token (required): your GitHub personal access token. This should be a string.

Styling

MyGitHub is styled using Tailwind CSS, a utility-first CSS framework for rapidly building custom user interfaces. Tailwind provides a wide range of classes for styling, making it easy to customize the look and feel of the component to match your project's style.

Troubleshooting

If you encounter any issues while using the GitHub Projects Display component, please check the following:

  • Ensure that Axios is installed in your project.
  • Ensure that the GitHub API is accessible and the provided GitHub username is valid.
  • Ensure that you have generated a GitHub personal access token and passed it as a prop.
  • Make sure that the required props have been correctly passed in.

Contributing

The GitHub Projects Display component is open-source and licensed under the MIT License.

Support

For support or questions, please open an issue on the project's GitHub repository or contact me directly using this email: [email protected]

You might also like...
Flexibly styled chat-widget for your react apps.
Flexibly styled chat-widget for your react apps.

Flexibly styled chat-widget for your react apps. It was mainly created for integration with chat-bots in messengers.

Minimal and performant React component library built on styled-components

Minimal and performant React component library built on styled-components

Imersão React.js 3º edição. Project using ReactJS, Next JS, and Styled Components for the week challenge by Alura. We created a social network inspired by Orkut.

Example app with styled-components This example features how you use a different styling solution than styled-jsx that also supports universal styles.

The simplest solution for content loading in React and styled-components.

styled-content-loader The simplest solution for content loading in React and styled-components. Getting Started npm install styled-components styled-c

Typograpy components for react and styled-components
Typograpy components for react and styled-components

styled-typography Typograpy components for react and styled-components styled-typography is a small set of components, using styled-components, to bet

A styled switch for React built using Emotion CSS and Framer motion
A styled switch for React built using Emotion CSS and Framer motion

A styled switch for React built using Emotion CSS and Framer motion

Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utilizando Styled Components
Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utilizando Styled Components

Simple Styled Form Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utiliza

Simple Portfolio Using React Hooks & Styled Components
Simple Portfolio Using React Hooks & Styled Components

Said MOUNAIM To view a live example, click here. Getting Started These instructi

🎥A criação de uma UI para Streaming utilizando React.js, Styled Components junto com Sass.
🎥A criação de uma UI para Streaming utilizando React.js, Styled Components junto com Sass.

Movie Screen - Exercitando React, Styled Components e Sass 🎛️ Dependencias React Styled Components Sass React Icons 🎯 Objetivo O principal intuito d

Owner
Amos Kyalo
❤️ ReactJS Wizard ❄️ CSS Magician
Amos Kyalo
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

Victor Dantas 9 Jun 30, 2022
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ??️ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

Andre Rabold 95 Aug 30, 2022
Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS.

Stail Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS. Why it's needed? First of all, I'm tired fr

null 6 Dec 8, 2022
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Creative Tim 1.4k Jan 6, 2023
Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

kodyl 236 Nov 18, 2022
Create tailwind css react components like styled components with classes name on multiple lines

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

Mathias Gilson 610 Dec 28, 2022
A toolchain for React component styling.

Radium yarn add radium # or npm install --save radium Radium is a set of tools to manage inline styles on React elements. It gives you powerful stylin

Formidable 7.4k Dec 30, 2022
Windstitch is a 1.2kB, Simple Styling Library that helps you set when a className should be applied to a component.

Windstitch is a 1.2kB, Simple Styling Library that helps you set when a className should be applied to a component.

Vinicius Pacheco 149 Dec 24, 2022
🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!

Aesthetic Start using Aesthetic now! aestheticsuite.dev Aesthetic is an end-to-end, multi-platform styling and design suite, that offers the following

Aesthetic 198 Nov 11, 2022
TailwindCSS plugin that helps styling radix state

TailwindCSS Radix TailwindCSS plugin that helps styling radix state. Installation yarn yarn add tailwindcss-radix npm npm i tailwindcss-radix Usage Yo

Florentin / 珞辰 1.1k Jan 1, 2023