This repository has been archived by the owner on Jan 6, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
11 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,15 @@ | ||
| # React Embed Gist | ||
| Embed a gist from Github with React. | ||
|
|
||
| [](https://www.npmjs.com/package/react-embed-gist) | ||
| [](https://github.com/msaracevic/react-embed-gist/blob/master/LICENSE) | ||
| [](https://github.com/msaracevic/react-embed-gist/) | ||
| [](https://github.com/msaracevic/react-embed-gist/) | ||
| Used and maintained by [Ptorx](https://ptorx.com) and other [Xyfir](https://www.xyfir.com) projects. | ||
|
|
||
| Simple react component which can embed gist in your react application | ||
| ```tsx | ||
| import { ReactGithubGist } from 'react-github-gist'; | ||
| import * as React from 'react'; | ||
|
|
||
| ## How to use | ||
|
|
||
| Just import as dependency in your file and pass gist as parameter, for example: | ||
|
|
||
| ``` | ||
| import ReactEmbedGist from 'react-embed-gist'; | ||
| // Only required attribute is gist | ||
| <ReactEmbedGist gist="msaracevic/5d757e2fc72482a9a4a439969500c2eb" | ||
| wrapperClass="gist__bash" | ||
| loadingClass="loading__screen" | ||
| titleClass="gist__title" | ||
| file=".bash_profile.sh"/> | ||
| <ReactGithubGist | ||
| // Gist to render | ||
| gist="GithubUser/GistIdentifier23a110196cc3ec113" | ||
| // Optionally render only a single file | ||
| file="file.md" | ||
| />; | ||
| ``` | ||
|
|
||
| ## Attributes | ||
|
|
||
| * `gist` - gist you want to display, in a form of :USERNAME/:GIST_ID | ||
| * `file` - *optional*, if you want to show just a single file from the gist, you can specify it here | ||
| * `titleClass` - *optional*, if you want to pass your own class to `h2` title of the gist | ||
| * `wrapperClass` - *optional*, if you want to pass your own class to `article` wrapping the gist | ||
| * `loadingClass` - *optional*, if you want to pass your own class to `article` wrapper which is displayed during loading time |