Styled-react-gist NPM

styled-react-gist

Upgraded rewrite of react-gist created by Tommy. Credit goes out to those who helped build that library.

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`:

npm i styled-react-gist

`yarn`:

yarn add styled-react-gist

✨ Usage

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 (
    <Gist
      gistId = '189e5c6bbc7217b8bdf952ff243c2411'
      file = 'styled-react-gist.jsx'
      gistUrl = 'https://gist.github.com/hammamikhairi/189e5c6bbc7217b8bdf952ff243c2411'

      style = {cssString}
      styleSheetUrl = "https://pleasedont.hammamikhairi.repl.co/css/npm.css"
    />
  );
};

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