LUApp® | react-custom-gist

React-custom-gist its a embedded gist on a custom iFrame with syntax color theme. You can select 'Monokai | Solarized | Chaos | Cobalt | Idle Fingers | Obsidian ...' and many others as theme

---

👌 Share awesome gist

yarn:

    yarn add --save react-custom-gist

npm:

    npm i --save react-custom-gist

✍️ Using

The default theme is Monokai

    // App.tsx
    import React from 'react';
    import Gist from 'react-custom-gist'

    const App:React.FC = () => {
        const url:string = 'your gist url'
        return <Gist src={url}/>
    }

    export default App

choose your theme

    // App.tsx
    import React from 'react';
    import Gist from 'react-custom-gist'

    const App:React.FC = () => {
        const url:string = 'your gist url'
        return <Gist src={url} theme='solarized-light'/>
    }

    export default App

choose your styles

    // App.tsx
    import React from 'react';
    import Gist from 'react-custom-gist'

    const App:React.FC = () => {
        const url:string = 'your gist url'
        return <Gist src={url} theme='solarized-light' style={{border:'none'}}/>
    }

    export default App

And thats it!, just add your git url to render a gist on your app. A special feature of this gist its the content based height.

🛠 Props

Name	Type	Default	Optional
src	string		false
style	CSSProperties	undefined	true
theme	monokai solarized-light solarized-dark chaos cobalt idle-fingers obsidian one-dark pastel-on-dark terminal tomorrow-night twilight	monokai	true

You can see all themes and styles here

LICENSE MIT

All rights reserved LUA Development Studio ®