0.0.21 • Published 3 years ago
@shipless/play v0.0.21
Shipless Play
Shipless Play is a React simple playground for HTML, CSS and JavaScript
Features
- ✅ Realtime preview
- ⬜️ Support SCSS
- ⬜️ Support React
- ⬜️ Custom theme
Installation
Use the package manager yarn
or npm
to install this package.
yarn add @shipless/play
# or
npm install @shipless/play
Usage
import
@shipless/play package suck as the following:
import ShiplessPlay from "@shipless/play"
const value = {
html: `
<div class="section">
<div>
<h1>Welcome to Playground</h1>
<p> A simple playground for HTML, CSS and JavaScript</p>
<a href="https://github.com/shipless/drafteditor">Github</a>
</div>
</div>
`,
css: `
body {
background: #97a2a9;
display: flex;
justify-content: center;
align-items: center;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
}
`,
javascript: `
console.log("your js")
`
}
<ShiplessPlay defaultValue={value}>
Then you must import style on your css file:
@import url("@shipless/play/dist/style.css");
Format for initial snippet
{
html: `<h1>Title</h1>`,
css: `h1 { color: red }`,
javascript: `console.log("this")`
}
Demo
Showcase
Custom scrollbar di css - murusdi
API
Props | description | default | required |
---|---|---|---|
id | a unique identifier for the iFrame | false | |
defaultValue | Initial code to be displayed | false |
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
License
0.0.21
3 years ago
0.0.20
3 years ago
0.0.15
3 years ago
0.0.16
3 years ago
0.0.17
3 years ago
0.0.18
3 years ago
0.0.19
3 years ago
0.0.13
3 years ago
0.0.14
3 years ago
0.0.11
3 years ago
0.0.10
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago