/reactblitz

React - StackBlitz component

Primary LanguageHTML

--------------------------------------------------------

⚛️ + ⚡️ = ReactBlitz

--------------------------------------------------------

Checkout the StoryBook

Hiya there 🤠, 👋👋'sup!?

reactblitz

ReactBlitz is a small library that programmatically renders StackBlitz projects embedded in your React app, inline, or by targeting specific elements (in case of dynamic content).

Instalation

  • npm install @arthurianx/reactblitz
  • import { ReactBlitz, ReactBlitzToElement } from '@arthurianx/reactblitz';

Usage

Simple usage instide a JSX template:

  • <ReactBlitz options={} projects={} />

Render the component on a already existing document element:

  • <ReactBlitzToElement options={} projects={} element={} />. element is an existing DOM element where the component will be portalled to.

Methods / Options

options and projects take the default StackBlitz payload for options and projects.

options is extended with a few quality of life properties:

export interface RBlitzOptions extends EmbedOptions {
    renderWhenVisible?: boolean;
    accentBorder?: boolean;
    accentColor?: string;
    loadingColor?: string;
}
  • renderWhenVisible is turned on by default, if the component is outside viewport it will be rendered when it enters the viewport. Behavior can be turned off.
  • accentBorder displays a border around the StackBlitz VM, to offer some visual integration with your app.
  • accentColor controls said border color.
  • loadingColor is the loading accentColor for the spinner that appears when loading the StackBlitz VM.