# @shipless/play

Latest version **0.0.21** (published 2021-07-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @shipless/play
pnpm add @shipless/play
yarn add @shipless/play
bun add @shipless/play
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.21 |
| Published | 2021-07-28 |
| First published | 2021-07-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 105.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Maintainers | muhrusdi |

## Links

- npm: https://www.npmjs.com/package/@shipless/play
- Repository: https://github.com/shipless/play
- Homepage: https://github.com/shipless/play#readme
- Issues: https://github.com/shipless/play/issues
- npm.io page: https://npm.io/package/@shipless/play

## Dependencies (4)

- [monaco-themes](https://npm.io/package/monaco-themes.md) ^0.3.3
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.13.10
- [react-split-pane](https://npm.io/package/react-split-pane.md) ^0.1.92
- [@monaco-editor/react](https://npm.io/package/@monaco-editor/react.md) ^4.2.1

## Recent versions

- 0.0.21 (latest) — 2021-07-28
- 0.0.20 — 2021-07-27
- 0.0.19 — 2021-07-25
- 0.0.18 — 2021-07-25
- 0.0.17 — 2021-07-25
- 0.0.16 — 2021-07-25
- 0.0.15 — 2021-07-25
- 0.0.14 — 2021-07-24
- 0.0.13 — 2021-07-24
- 0.0.11 — 2021-07-22
- 0.0.10 — 2021-07-22
- 0.0.9 — 2021-07-22
- 0.0.8 — 2021-07-22
- 0.0.7 — 2021-07-22
- 0.0.6 — 2021-07-22
- … 4 more at https://npm.io/package/@shipless/play/versions

## README

<p align="center">
  <a href="https://github.com/shipless/play">
    <img alt="shipless" src="https://res.cloudinary.com/muhrusdi/image/upload/v1627215232/shipless-play.png" width="100%" />
  </a>
</p>

# Shipless Play

Shipless Play is a React simple playground for HTML, CSS and JavaScript

[![npm (scoped)](https://img.shields.io/npm/v/@shipless/play?style=for-the-badge)](https://www.npmjs.com/package/@shipless/play)
[![npm](https://img.shields.io/npm/dt/@shipless/play?label=Download&style=for-the-badge)](https://www.npmjs.com/package/@shipless/play)
![NPM](https://img.shields.io/npm/l/@shipless/highlight?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/@shipless/play?style=for-the-badge)

### Features
- ✅ Realtime preview
- ⬜️ Support SCSS
- ⬜️ Support React
- ⬜️ Custom theme

### Installation

Use the package manager `yarn` or `npm` to install this package.

```bash
yarn add @shipless/play
# or
npm install @shipless/play
```

### Usage

`import` @shipless/play package suck as the following:

```js
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:
 ```css
 @import url("@shipless/play/dist/style.css");
 ```

 ### Format for initial snippet

```js
{
  html: `<h1>Title</h1>`,
  css: `h1 { color: red }`,
  javascript: `console.log("this")`
}
```

 ### Demo

 [Example](https://shipless-play.netlify.app/)

 ### Showcase

 - [Custom scrollbar di css](https://muhrusdi.github.io/blog/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
[MIT](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/@shipless/play · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._