# @shapla/vanilla-components

> A collection of reusable vanilla javaScript components.

Latest version **0.5.0** (published 2025-02-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @shapla/vanilla-components
pnpm add @shapla/vanilla-components
yarn add @shapla/vanilla-components
bun add @shapla/vanilla-components
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2025-02-28 |
| First published | 2023-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 1 |
| Unpacked size | 138.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | sayful |
| Keywords | spinner, notification, confirm, alert |

## Links

- npm: https://www.npmjs.com/package/@shapla/vanilla-components
- Repository: https://github.com/sayful1/shapla-vanilla-components
- Homepage: https://github.com/sayful1/shapla-vanilla-components#readme
- Issues: https://github.com/sayful1/shapla-vanilla-components/issues
- npm.io page: https://npm.io/package/@shapla/vanilla-components

## Dependencies (1)

- [shapla-css](https://npm.io/package/shapla-css.md) 2.6.3

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 0.5.0 (latest) — 2025-02-28
- 0.4.0 — 2024-01-17
- 0.2.0 — 2023-11-17
- 0.1.0 — 2023-11-03

## README

# Shapla Components

> IMPORTANT: Shapla Components is a work in progress and subject to major changes until 1.0 release.

A collection of reusable components using vanilla javaScript.

## Table of contents

- [Installation](#installation)
- [Usage](#usage)

# Installation

Install using npm package manager

```
npm i @shapla/vanilla-components
```

or using yarn package manager

```
yarn add @shapla/vanilla-components
```

# Usage

Here we export all components script as ES module and all style as SCSS mixins. So you need to import SCSS mixin to
load style of component and also need to import ES module and register as vue component.

For example, to use button and progress bar components:

### Styles (SCSS)

```scss
// Add the following line at top of your scss file
@use "@shapla/vanilla-components/src/index.scss" as shapla;

@include shapla.spinner;
@include shapla.notification;
// Include other mixins as your requirement
```

### Javascript Instantiation

```js
import {Spinner, Notify} from "@shapla/vanilla-components";

```

# List of Components

<details>
<summary>Loading Spinner</summary>

A loading spinner component using vanilla javaScript.

Include SCSS mixin

```scss
// Add the following line at top of your scss file
@use "@shapla/vanilla-components/src/index.scss" as shapla;

@include shapla.spinner;
```

Import javaScript module

```js
import {Spinner} from "@shapla/vanilla-components";

// Show spinner
Spinner.show();

// Show single spinner with 'Loading...' text
Spinner.show({single: true, showText: true});

// Hide spinner
Spinner.hide();
```

**Available Props for `Spinner.show()` method**

| Property      | Type    | Required | Default      | Description                                                     |
|---------------|---------|----------|--------------|-----------------------------------------------------------------|
| `single`      | Boolean | **no**   | `false`      | If set `true`, only primary color will be shown for all layers. |
| `showText`    | Boolean | **no**   | `false`      | If set `true`, `Loading...` text will be show beside spinner.   |
| `loadingText` | String  | **no**   | `Loading...` | Loading text                                                    |
| `position`    | String  | **no**   | `fixed`      | Value can be `fixed`, `absolute`, or `static`.                  |
| `size`        | String  | **no**   | `default`    | Value can be `default`, `small`, or `medium` or `large`.        |

</details>
<details>
<summary>Notification</summary>

A simple notification component using vanilla javaScript.

Include SCSS mixin

```scss
// Add the following line at top of your scss file
@use "@shapla/vanilla-components/src/index.scss" as shapla;

@include shapla.delete-icon;
@include shapla.notification;
```

Import javaScript module

```js
import {Notify} from "@shapla/vanilla-components";

// Show success notification
Notify.success('Message content');

// You can also include title and timeout
Notify.success('Message content', 'Success!', 5000);
```

Notify API

- Notify.info(message, title, timeout);
- Notify.success(message, title, timeout);
- Notify.warning(message, title, timeout);
- Notify.error(message, title, timeout);

| Property  | Type   | Required | Default | Description                       |
|-----------|--------|----------|---------|-----------------------------------|
| `message` | String | **yes**  | ``      | Notification message              |
| `title`   | String | **no**   | ``      | Notification title                |
| `timeout` | Number | **no**   | `4000`  | The popup timeout in milliseconds |

</details>
<details>
<summary>Dialog</summary>

A simple dialog component for confirm/alert dialog using vanilla javaScript.

Include SCSS mixin

```scss
// Add the following line at top of your scss file
@use "@shapla/vanilla-components/src/index.scss" as shapla;

@include shapla.modal;
```

Import javaScript module

```js
import {Dialog} from "@shapla/vanilla-components";

// Show confirm dialog
Dialog.confirm('Are you sure to delete the item?').then(() => {
    // User confirmed to delete the item
});

// Show alert dialog
Dialog.alert('A simple alert message like native JavaScript alert');
```

</details>

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