https://github.com/hammamikhairi/styled-react-gist
Styled Github Gist React component
https://github.com/hammamikhairi/styled-react-gist
collaborate embed github github-gist github-pages react typescript
Last synced: 8 days ago
JSON representation
Styled Github Gist React component
- Host: GitHub
- URL: https://github.com/hammamikhairi/styled-react-gist
- Owner: hammamikhairi
- License: mit
- Created: 2022-07-28T17:54:12.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-08-05T11:49:03.000Z (over 3 years ago)
- Last Synced: 2024-10-29T20:57:18.766Z (over 1 year ago)
- Topics: collaborate, embed, github, github-gist, github-pages, react, typescript
- Language: TypeScript
- Homepage:
- Size: 723 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# styled-react-gist
Upgraded rewrite of [react-gist](https://github.com/tleunen/react-gist) created by [Tommy](https://github.com/tleunen). Credit goes out to those who helped build that library.
[](https://www.npmjs.com/package/styled-react-gist)
This rewrite:
- Adds native TS support
- Adds Styling feature ( url || raw css )
## Why use styled-react-gist ?
- the fastest library to embed themed code snippets in your website
- because we care about your bundle size <3
## How it works
This package embeds styled github gists in react applications, the styles currently can be imported with a url of a css file `[DOMAIN_NAME]/[FILE_NAME].css` and/or raw css ( refer to this example )
If both methods were used, the styles specified in `cssString` will override the ones, if mentioned, imported with a url. This will allow applying adjustments to an open source (coming soon) css file :)
## 🚀 Installation
##### [`npm`](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm):
```bash
npm i styled-react-gist
```
##### [`yarn`](https://classic.yarnpkg.com/en/docs/install/#mac-stable):
```bash
yarn add styled-react-gist
```
## ✨ Usage
```typescript jsx
import React from "react";
import Gist from "styled-react-gist";
export const YourComponent = () => {
const cssString = `
.js-file-line-container {
background : whitesmoke !important;
}
.gist-meta{
display : none !important
}
.gist-data {
background : whitesmoke !important;
padding : 1rem 0.5rem !important;
// background: transparent !important;
}
`;
return (
);
};
```
The component will render :
## 📌 Props
Prop | Type | Description | Required
--------------------- | -------- | ------------------------- | --------
`file`|string|Name of the gist's file (if the gist has many file, pick any of them)
**avoid using special Characters**|Yes
`gistId`|string|gist's id|Yes (if `url` isn't specified)
`gistUrl`|string|gist's url| Yes (if `gistId` isn't specified)
`cssString`|string| a string containing css (refer to this example) |No
`styleSheetUrl`|string|a url to a `.css` file|No|
## ✌️ License
[MIT](https://opensource.org/licenses/MIT)