React StackBlitz

Install

npm install @uiw/react-stackblitz --save

Usage

import React from 'react';
import StackBlitz from '@uiw/react-stackblitz';

const code = `import React from "react";
import ReactDOM from "react-dom";
import Avatar from '@uiw/react-avatar';
import "@uiw/react-avatar/lib/esm/style/index.css";

ReactDOM.render(
  <div>
    <div style={{ paddingBottom: 20 }}>
      <Avatar icon="user" />
      <Avatar size="small" icon="user" />
    </div>
    <div>
      <Avatar shape="square" size="large" icon="user" />
      <Avatar shape="square" icon="user" />
      <Avatar shape="square" size="small" icon="user" />
      <Avatar shape="square" size="mini" icon="user" />
    </div>
  </div>,
  document.getElementById("root")
);`;

const Example = () => {
  return (
    <StackBlitz
      template="create-react-app"
      title="uiw"
      description="uiw v4.7.2 - demo"
      tags={["stackblitz", "uiw", "react"]}
      dependencies={{
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "@uiw/react-avatar": "4.7.2",
        "@babel/runtime": "7.12.5",
      }}
      files={{
        "index.html": `<div id="root"></div>`,
        "index.js": code,
      }}
    >
      Basic Example Open in StackBlitz
    </StackBlitz>
  )
}

Props

type StackBlitzProps = Project & React.ButtonHTMLAttributes<HTMLButtonElement> & {
  /**
   * String of the Github username, repo and optionally branch/tag/commit.
   * https://developer.stackblitz.com/docs/platform/javascript-sdk#sdkopengithubprojectreposlug-opts
   */
  repoSlug?: string;
  projectId?: string;
  embedOpts?: EmbedOpts;
  openOpts?: OpenOptions;
};

Development

# Step 1, run first, listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
npm run watch
# Step 2, development mode, listen to compile preview website instance
npm run start

npm run build

Related

Contributors

License