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|

📝 Notes

this package is still in development

✌️ License

MIT