React StackBlitz
===


A React component is provided that allows you to programmatically generate stackblitz projects from code samples on the fly.

Install

``bash
npm install @uiw/react-stackblitz --save
`

Usage

`jsx
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(

,
document.getElementById("root")
);;

const Example = () => {
return (
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":

,
"index.js": code,
}}
>
Basic Example Open in StackBlitz

)
}
`

Props

`typescript
type StackBlitzProps = Project & React.ButtonHTMLAttributes & {
/**
* 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

Runs the project in development mode.

`bash


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
`

production

Builds the app for production to the build folder.

`bash
npm run build
`

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

$3

- @uiw/react-codepen
- @uiw/react-codesandbox`

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.