Install

npm install @uiw/react-stackblitz --save

Usage

importReactfrom'react';importStackBlitzfrom'@uiw/react-stackblitz';constcode=`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"));`;constExample=()=>{return(<StackBlitztemplate="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></div>`,"index.js":code,}}>      Basic Example Open in StackBlitz</StackBlitz>)}

Props

typeStackBlitzProps=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 filenpm run watch# Step 2, development mode, listen to compile preview website instancenpm run start

npm run build

Related

Contributors

License