React-github-issue NPM

react-github-issue / Exports

👉 move to the homepage 👈

react-github-issue

install

npm i react-github-issue

components

example component

"use client";
import {GithubIssueComment, GithubIssueReplyList, useGithubIssue} from 'react-github-issue';
import ContainerLayout from "@/components/layouts/container.layouts";

interface GuestBookProps {
    personalAccessToken?: string
}
const GuestBook = ({personalAccessToken}:GuestBookProps) => {
    
    if(
        !(
            process.env.NEXT_PUBLIC_GIT_HUB_TOKEN
            && process.env.NEXT_PUBLIC_GIT_HUB_ISSUE_NUMBER
            && process.env.NEXT_PUBLIC_GIT_HUB_OWNER
            && process.env.NEXT_PUBLIC_GIT_HUB_ISSUE_REPO
        )
    ){
        throw new Error('A required value is missing');
    }

    const {data, comment, isCommentLoading, locationLogin} = useGithubIssue({
        gitPersonalAccessToken: process.env.NEXT_PUBLIC_GIT_HUB_TOKEN,
        gitIssueNumber: process.env.NEXT_PUBLIC_GIT_HUB_ISSUE_NUMBER,
        gitOwner: process.env.NEXT_PUBLIC_GIT_HUB_OWNER,
        gitRepo: process.env.NEXT_PUBLIC_GIT_HUB_ISSUE_REPO
    });
        
    
    
    return (
       <ContainerLayout>
           <GithubIssueComment
               isLoading={isCommentLoading}
               onSubmit={(message) => {
                comment(message);            
               }}
               onLogin={() => {
                if(process.env.NEXT_PUBLIC_GIT_HUB_OAUTH_CLIENT_ID){
                    locationLogin(process.env.NEXT_PUBLIC_GIT_HUB_OAUTH_CLIENT_ID)
                }
               }}
           />
           <GithubIssueReplyList
               data={data}
           />
       </ContainerLayout>
    )
}

components

GithubIssueComment

required property
gitOAuthClientId - Github OAuth it the gitPersonalAccessToken is undefined, a login button appears, and if the gitPersonalAccessToken has a value, acomment button appears
ㅣlearn how to obtain the 'Git OAuth Secret Id' and 'Git Personal Access Token' using the Github OAuth link above
example
import { GithubIssueComment } from 'react-github-issue';

## GithubIssueReplyList

<img src="https://juny.vercel.app/api/github/image/Pasted image 20240519113424.png">

### example

```tsx
import { GithubIssueReplyList } from 'react-github-issue';
<GithubIssueReplyList 
	gitPersonalAccessToken={your token},  
	gitRepo={your repository name},  
	gitOwner={your git owner},  
	gitIssueNumber={your git issue number}
/>

GithubIssueReply

example

import { GithubIssueReply } from 'react-github-issue';

<GithubIssueReply
	updated_at={new Date()},  
	body: "test",  
	user: {  
	    avatar_url: "https://avatars.gith?v=4",  
	    site_admin: true,  
	    login: "jun-young"  
	}
/>

othre

Get Property

gitOwner: the text inside the red board is 'gitOwner' gitRepo: the text inside the blue board is 'gitRepo' gitIssueNumber: the text inside the green board is 'gitIssueNumber'