# @windui/window

> WindUI | Window Package | by Swôth

Latest version **1.0.0** (published 2022-02-13) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @windui/window
pnpm add @windui/window
yarn add @windui/window
bun add @windui/window
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-02-13 |
| First published | 2022-02-13 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | clqu, swoth |
| Keywords | ui, window, react, dom, windui, js, javascript, nextjs, next, reactjs |

## Links

- npm: https://www.npmjs.com/package/@windui/window
- npm.io page: https://npm.io/package/@windui/window

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-02-13

## README

<img src="https://i.ibb.co/ccDKcjv/image.png">
<h6 align="center">Developed with 🖤 by Swôth</h6>

---

![npm install](https://nodei.co/npm/@windui/window.png?mini=true)
![npm version](https://badge.fury.io/js/@windui%2Fwindow.svg)

# Installation
```console
npm i @windui/window --save
yarn add @windui/window
```

# CDN & DOM Usage
```html
<script src="https://cdn.jsdelivr.net/npm/@windui/window@x.x.x/windui.window.min.js"></script>
<script>
    new WuiWindow({
        // ...props
    }).show();
</script>
```

# React Example
```jsx
import Window from "@windui/window";

export default function Index() {
    const trigger = () => {
        const hello = new Window({
            options: {
                speed: 250, // animation speed
                headerColor: "#fff", // header text color
                headerBg: "#101010", // header bg color
                iconColor: "#ef4444", // header icon color
                bodyColor: "#fff", // body text color
                bodyBg: "#202020", // body bg color
                shadowColor: "#00000033" // window shadow color
            },
            title: "Hello World!", // window title
            icon: "🛠️", // only emojis!
            body: `
                <h1>hi!</h1>
            ` // html supported
        });

        // returns promise
        hello.open().then(({ $, success, inputs }) => {
            // returns false when the user closes the window
            if (success == true) { // if submitted
                $.close(); // there is no automatic close.
                console.log(inputs); // Object[]
            };
        });
    };

    return (
        <button onClick={trigger}>
            Open Window!
        </button>
    );
};
```

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