react-github-issue
v1.0.17
Published
react-github-issue / [Exports](modules.md)
Downloads
28
Maintainers
Readme
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
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';
<GithubIssueComment
gitOAuthClientId={your git oAuth secret}
gitPersonalAccessToken={your token | undefined}
/>
GithubIssueReplyList
example
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'
Get Git Personal Token
to get a 'gitPersonalToken' click the link https://github.com/settings/tokens