open-index/open-npm huggingface dataset:
npm package: @shopware-ag/storefront-types
Description: Provides Shopware Storefront Typescript types
Author: shopware AG
Latest version: 0.4.0

# Types for Shopware Storefront

This package provides types for window-bound classes in Shopware 6 Storefront:

- `window.PluginManager`
- `window.PluginBaseClass`
- `window.router`
- `window.formValidation`
- `window.validationMessages`
- `window.useDefaultCookieConsent`

and all regular imports of the Storefront.

Install this package with NPM:

```bash
npm install @shopware-ag/storefront-types --save-dev
```

To have the types active, you need to create a `tsconfig.json` (`src/Resources/app/storefront/tsconfig.json`) with the following content:

```json
{
    "compilerOptions": {
        "types": ["@shopware-ag/storefront-types"]
    }
}
```

## Typed Plugin Options

You can use a generic type parameter to get fully typed options in your plugins:

```ts
const { PluginBaseClass } = window;

interface MyPluginOptions {
    option1: string;
    option2: number | null;
}

export default class MyPlugin extends PluginBaseClass<MyPluginOptions> {
    static options: MyPluginOptions = {
        option1: 'default value',
        option2: null
    };

    init() {
        // this.options is fully typed
        console.log(this.options.option1); // string
        console.log(this.options.option2); // number | null
    }
}
```

## Extending Global Interfaces

The `ShopwareRouter` and `ShopwareValidationMessages` interfaces can be extended via [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) to add custom routes or validation messages from your plugin:

```ts
// Add custom routes
declare global {
    interface ShopwareRouter {
        'frontend.my-plugin.my-route': string;
    }
}

// The route is now available with type safety
const url = window.router['frontend.my-plugin.my-route'];
```

```ts
// Add custom validation messages
declare global {
    interface ShopwareValidationMessages {
        myCustomValidator: string;
    }
}
```
npm package: @shopware-ag/stylelint-plugin-meteor
Description: The stylelint plugin for the Meteor Design System
Latest version: 5.0.0

# stylelint-plugin-meteor

This stylelint plugin adds a handful of rules for the Meteor Design System.

## Installation

Add this package to your project:

```sh
npm i -D @shopware-ag/stylelint-plugin-meteor
```

Add this package to your stylelint config.

```json
{
  "plugins": ["@shopware-ag/stylelint-plugin-meteor"],
  "rules": {
    "meteor/prefer-sizing-token": [
      true,
      {
        "severity": "warning"
      }
    ]
  }
}
```

# Rules

- `meteor/no-primitive-token`
- `meteor/prefer-background-token`
- `meteor/prefer-border-token`
- `meteor/prefer-color-token`
- `meteor/prefer-font-token`
- `meteor/prefer-sizing-token`
npm package: @shopware-pwa/helpers-next
Description: [DEPRECATED] Use @shopware/helpers instead. Shopware helpers for accessing API data
Author: Shopware
Latest version: 1.3.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# shopware/frontends - helpers

> [!WARNING]
>
> This package is deprecated and will be removed in the future. Use [@shopware/helpers](https://www.npmjs.com/package/@shopware/helpers) instead.

Welcome to `@shopware-pwa/helpers-next` package.

For getting started documentation visit [https://frontends.shopware.com/](https://frontends.shopware.com/)

Documentation specific for this package: [helpers](https://frontends.shopware.com/packages/helpers.html)

## Reusable classes

The `helpersCssClasses` variable, defined in the `cms/layoutClasses.ts` helper file, comprises an array of class names utilized within the CMS.

To enhance type support, a union type `HelpersCssClasses` is defined, which encompasses all class names present in the `helpersCssClasses` array.

```ts
const visibilityMap: Record<CmsVisibility, HelpersCssClasses> = {
  mobile: "max-md:hidden",
  tablet: "md:max-lg:hidden",
  desktop: "lg:hidden",
};
```

These classes can be integrated into a custom template, thereby ensuring consistency across different packages. For example as a `safelist` classes in unocss configuration file

```ts
import { helpersCssClasses } from "@shopware-pwa/helpers-next";

export default defineConfig({
  safelist: helpersCssClasses,
});
```

<!-- AUTO GENERATED CHANGELOG -->

## Changelog

Full changelog for stable version is available [here](https://github.com/shopware/frontends/blob/main/packages/helpers/CHANGELOG.md)

### Latest changes: 1.3.0

### Minor Changes

- [#1599](https://github.com/shopware/frontends/pull/1599) [`6736509`](https://github.com/shopware/frontends/commit/67365096168e28b9683cfd3b5d4c8bb3b4ae07e3) Thanks [@patzick](https://github.com/patzick)! - Package `@shopware-pwa/helpers-next` is deprecated. Use [@shopware/helpers](https://www.npmjs.com/package/@shopware/helpers) instead.
npm package: @shopware-pwa/types
Description: [DEPRECATED] Showare Store API Types
Author: Shopware
Latest version: 1.0.6
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# shopware/frontends - types

> [!WARNING]  
> Deprecated. This package is deprecated. Use The new [API client](https://www.npmjs.com/package/@shopware/api-client) package instead. Combined with the [@shopware/api-gen](https://www.npmjs.com/package/@shopware/api-gen) package, it provides a more flexible and powerful way to reach the API types.

Welcome to `@shopware-pwa/types` package.

For getting started documentation visit [https://frontends.shopware.com/](https://frontends.shopware.com/)

Documentation specific for this package: [types](https://frontends.shopware.com/packages/types.html)

<!-- AUTO GENERATED CHANGELOG -->

## Changelog

Full changelog for stable version is available [here](https://github.com/shopware/frontends/blob/main/packages/types/CHANGELOG.md)

### Latest changes: 1.0.6

### Patch Changes

- Updated dependencies [[`a87bbcf`](https://github.com/shopware/frontends/commit/a87bbcfa3f5aa440265b1e8f0fc72a204863befc)]:
  - @shopware/api-client@1.2.0
npm package: @shopware-pwa/vue3-plugin
Description: Shopware Frontends plugin for Vue 3. DEPRECATED.
Author: Shopware
Latest version: 0.1.37
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Frontends plugin for Vue 3

## ⚠️ DEPRECATED

The plugin can be created by using `createInstance` method of `@shopware-pwa/composables-next` package. [See the details](https://www.npmjs.com/package/@shopware-pwa/composables-next).

<!-- AUTO GENERATED CHANGELOG -->

## Changelog

Full changelog for stable version is available [here](https://github.com/shopware/frontends/blob/main/packages/vue3-plugin/CHANGELOG.md)

### Latest changes: 0.1.37

### Patch Changes

- [#351](https://github.com/shopware/frontends/pull/351) [`f10cab7`](https://github.com/shopware/frontends/commit/f10cab7e303b79cf8bbd758859d05723b586a1ec) Thanks [@mkucmus](https://github.com/mkucmus)! - Mark package as deprecated
npm package: @shopy/cli
Description: The agent shopping CLI — discover merchants, install shopping skills, and search products. Powered by shopy.sh
Author: shopy
Latest version: 0.0.2

# shopy

The agent shopping CLI — discover merchants, install shopping skills, and search products.

Powered by [shopy.sh](https://shopy.sh)

## Quick Start

```bash
npx shopy add amazon      # Install a shopping skill
npx shopy search "toner"  # Search the product index
npx shopy recommend       # Get merchant recommendations
```

## About

**shopy** is the CLI layer for the agent commerce stack:

- **Merchant Discovery** — Find the right store by category, sector, and tier
- **Shopping Skills** — Install SKILL.md files that teach agents how to shop at specific merchants
- **Product Index** — Search real products across multiple vendors with prices and availability

## Status

This is an early placeholder release. The full CLI is under active development.

Follow along at [shopy.sh](https://shopy.sh) for updates.

## License

MIT
npm package: @shorasul/node-red-asbt-oracle
Description: Oracle 11g-compatible Node-RED connector with Thick Client support
Author: shorasul.shoazimov@asbt.uz
Latest version: 0.0.1

# node-red-contrib-asbt-oracle

A secure, production-ready Oracle Database connector node for [Node-RED](https://nodered.org), designed for enterprise-level data integration scenarios. It allows developers to execute SQL queries against Oracle DB instances with full control and reliability.

## 📦 Features

- Execute `SELECT`, `INSERT`, `UPDATE`, `DELETE` SQL commands
- Uses official Oracle Node.js driver (`oracledb`)
- Secure credential management
- Clean and simple configuration UI
- Asynchronous operation with full error handling
- Designed for event-driven architectures and real-time integration

## 🛠 Installation

Make sure you have [Oracle Instant Client](https://www.oracle.com/database/technologies/instant-client.html) installed on your system.

```bash
npm install node-red-contrib-asbt-oracle
npm package: @shore/i18n
Description: A wrapper around some *i18next* functionality - encapsulating *namespaced* translations.
Author: Shore GmbH
Latest version: 1.2.0

# i18n

A wrapper around some [i18next](http://i18next.com/) functionality - encapsulating *namespaced* translations.

## Usage

Translation file `./de/translation.json`:
```json
{
  "english": "Englisch"
}
```

Translation file `./de/my-namespace.json`:
```json
{
  "Hello world!": "Hallo Welt!"
}
```

Application example:
```javascript
import i18n from '@shore/i18n';

i18n.init({
  locale: 'de',
  ...
})
.then(() => {
  console.log(i18n.locale); // -> 'de'
  console.log(i18n.t('english')); // -> 'Englisch'

  return i18n.loadNamespace('my-namespace');
})
.then((i18nNamespaced) => {
  console.log(i18nNamespaced.t('Hello world!')); // -> 'Hallo Welt!'
});

```

If [i18next](http://i18next.com/) should not be bundled because the embedding page already made it globally available through `window.i18n` and called `init` on it, use:

```javascript
import i18n from '@shore/i18n/no-bundled-i18next';

console.log(i18n.locale); // -> 'de'
i18n.loadNamespace('my-namespace')
.then((i18nNamespaced) => {
  console.log(i18nNamespaced.t('Hello world!')); // -> 'Hallo Welt!'
});

```

If you want to conveniently use namespaced version of `t` and `exists` across modules:

```javascript
// i18n.js
import i18n from '@shore/i18n/no-bundled-i18next';

const namespace = 'my-namespace';

export default i18n;
export function loadDefaultNamespace() {
  return i18n.loadNamespace(namespace);
}
export const i18nNamespaced = i18n.useNamespace(namespace);


// my-module.js
import { i18nNamespaced as i18n } from './i18n';

export function helloWorld() {
  return i18n.t('Hello World!');
}


// main.js
import { loadDefaultNamespace } from './i18n';
import { helloWorld } from './my-module';

loadDefaultNamespace().then(() => {
  console.log(helloWorld()); // -> 'Hallo Welt!'
});

```
npm package: @shore/i18n-hbs-helper
Description: A module exporting an object as the default providing a method to register some i18n Handlebars helpers
Author: Shore GmbH
Latest version: 1.1.0

# i18n-hbs-helper

A module exporting an object as the default providing a method to register
some **i18n** *Handlebars* helpers.

## Usage

```javascript
import Handlebars form 'handlebars';
import I18n from '@shore/i18n';
import I18nHbsHelper from '@shore/i18n-hbs-helper';

I18nHbsHelper.register(Handlebars, I18n);
```

Then just use the `t`ranslate helper in your *Handlebars* template:
```handlebars
{{t "foo.bar.baz" }}
{{t "foo" "bar" "baz" }}
{{t "foo.bar" "baz" }}
{{t "foo" "bar" varReturningBaz }}
{{t "foo.bar.baz" var1="foo" var2="bar" }}
```
npm package: @shorecrab/react-time-table
Description: A simple, customizable time table library for React
Latest version: 1.0.9

# react-time-table

A simple, customizable time table library for React

## Usage

```JSX
import './App.css';
import { Block, TimeTable, useBlock } from './components/block/block';

function App() {
  const {
    blockMap,
    usedTime,
    createBlock,
    moveBlock,
    removeBlock
  } = useBlock({});

  return (
    <div>
      <TimeTable
        rowGrid={4}
        rows={[
          {
            key:'1:00',
          },
          {
            key:'2:00',
          },
        ]}
        columns={[ 
          {
            key:'monday',
          },
          {
            key:'tuesday',
          },
        ]}
        blockMap={blockMap}
        usedTime={usedTime}
        onDoubleClickGrid={(row, col) => {
          //random colored blocks
          createBlock(row, col, <Block key={row+' '+col} height={3} style={{backgroundColor:'#'+Math.floor(Math.random()*16777215).toString(16)}}/>)
        }}
        onDropBlock={(row, col, newRow, newCol)=> {
          moveBlock(row, col, newRow, newCol);
        }}
      />
    </div>
  );
}

```


## Future change
todo list
- [ ] error handling in createBlock and moveBlock
- [ ] drop position should be on the top of the block
- [X] allow custom columns
- [ ] move files to src directory
npm package: @shorilabs/cli
Description: CLI tool to browse and install shorilabs components (patterns, buttons, cards, inputs, badges, loaders, avatars, toggles, dividers)
Author: Pratik
Latest version: 2.1.0

# @shorilabs/cli

CLI tool to browse and install shorilabs patterns and buttons.

## Installation

```bash
npm install -g @shorilabs/cli
```

## Usage

### List Components

```bash
# List all patterns
shorilabs patterns

# List all buttons
shorilabs buttons

# Filter by category
shorilabs patterns --category gradients
shorilabs buttons --category neon

# Output as JSON
shorilabs patterns --json
```

### Get Component Details

```bash
# Get pattern CSS
shorilabs get aurora-glow

# Get button CSS
shorilabs get neon-blue --type button

# Get only Tailwind classes
shorilabs get aurora-glow --format tailwind
```

### Add to Project

```bash
# Add pattern to patterns.css
shorilabs add aurora-glow

# Add button to buttons.css
shorilabs add neon-blue --type button

# Specify output file
shorilabs add aurora-glow --file src/styles/backgrounds.css

# Append instead of overwrite
shorilabs add cyber-sunset --append

# Output Tailwind classes
shorilabs add aurora-glow --tailwind
```

### Search Components

```bash
# Search all components
shorilabs search gradient

# Search only patterns
shorilabs search geometric --type patterns

# Search only buttons
shorilabs search neon --type buttons

# Output as JSON
shorilabs search gradient --json
```

### Get Info

```bash
shorilabs info
```

## Pattern Categories

| Category | Description |
|----------|-------------|
| gradients | Gradient backgrounds |
| geometric | Geometric patterns |
| decorative | Decorative patterns |
| effects | Special effects |

## Button Categories

| Category | Description |
|----------|-------------|
| primary | Primary action buttons |
| secondary | Secondary buttons |
| outline | Outline/bordered buttons |
| ghost | Ghost/transparent buttons |
| animated | Buttons with animations |
| 3d | 3D effect buttons |
| neon | Neon glow buttons |

## Examples

```bash
# Quick workflow
shorilabs patterns                    # See all patterns
shorilabs get aurora-glow             # Preview CSS
shorilabs add aurora-glow             # Add to project

# Working with buttons
shorilabs buttons                     # See all buttons
shorilabs get neon-blue -t button     # Preview button CSS
shorilabs add neon-blue -t button     # Add to project
```

## Links

- Website: https://shorilabs.xyz
- GitHub: https://github.com/pratik20gb/shorilabs
- Author: [Pratik](https://thepratik.xyz)

## License

MIT
npm package: @shorilabs/patterns-cli
Description: CLI tool to browse and install shorilabs background patterns
Author: Pratik
Latest version: 1.0.1

# @shorilabs/patterns-cli

[![npm](https://img.shields.io/npm/v/@shorilabs/patterns-cli)](https://www.npmjs.com/package/@shorilabs/patterns-cli)
[![License](https://img.shields.io/badge/license-MIT-green)](LICENSE)

CLI tool to browse and install shorilabs background patterns.

## Installation

```bash
npm install -g @shorilabs/patterns-cli
```

## Usage

### List all patterns

```bash
shorilabs list
```

Filter by category:
```bash
shorilabs list --category gradients
```

Output as JSON:
```bash
shorilabs list --json
```

### Get a specific pattern

```bash
shorilabs get aurora-glow
```

Get only CSS:
```bash
shorilabs get aurora-glow --format css
```

Get only Tailwind:
```bash
shorilabs get aurora-glow --format tailwind
```

### Add pattern to project

Add as CSS:
```bash
shorilabs add aurora-glow --file styles/patterns.css
```

Add as Tailwind:
```bash
shorilabs add aurora-glow --tailwind --file styles/patterns.css
```

Append to existing file:
```bash
shorilabs add grid-fade --append
```

### Search patterns

```bash
shorilabs search aurora
```

## Development

```bash
# Install dependencies
npm install

# Build
npm run build

# Run in development
npm run dev list
```

## Commands

- `shorilabs list` - List all available patterns
- `shorilabs get <id>` - Get a specific pattern
- `shorilabs add <id>` - Add pattern to your project
- `shorilabs search <query>` - Search patterns

## Links

- **Website:** [shorilabs.xyz](https://shorilabs.xyz)
- **GitHub:** [github.com/pratik20gb/shorilabs](https://github.com/pratik20gb/shorilabs)
- **npm:** [npmjs.com/package/@shorilabs/patterns-cli](https://www.npmjs.com/package/@shorilabs/patterns-cli)
- **Twitter:** [@sage_pratik](https://twitter.com/sage_pratik)
- **Author:** [thepratik.xyz](https://thepratik.xyz)

## License

MIT © 2025 shorilabs
npm package: @short.io/koa-hot-shots
Description: Statsd route monitoring middleware for koa
Author: Andrii Kostenko
Latest version: 1.0.5

# koa-hot-shots

[StatsD](https://github.com/etsy/statsd/) route monitoring middleware for 
[koa](https://github.com/koajs/koa)
This middleware can be used either globally or on a per-route basis (preferred)
and sends status codes and response times to StatsD.

Forked from [withspectrum/koa-hot-shots](https://github.com/withspectrum/koa-hot-shots) for usage in [Short.io](https://github.com/short.io)

## Installation

``` bash
npm install @short.io/koa-hot-shots
```

## Usage

An example of an koa server with koa-hot-shots:

``` js
const koa = require('koa');
const route = require('koa-route');
const statsd = require('@short.io/koa-hot-shots');
const app = new Koa();

app.use(statsd());

app.use(route.get('/', function (ctx) {
  ctx.body = 'Hello World!';
});

app.listen(3000);
```

By default, the middleware will send `status_code` and `response_time` stats
for all requests. For example, using the created server above and a request to
`http://localhost:3000/`, the following stats will be sent:

```
status_code.200:1|c
response_time:100|ms
```

### Per route example

However, it's **highly recommended** that you set `req.statsdKey` which
will be used to namespace the stats. Be aware that stats will only be logged
once a response has been sent; this means that `req.statsdKey` can be
set even after the koa-hot-shots middleware was added to the chain. Here's an 
example of a server set up with a more specific key:

``` js
var koa = require('koa');
var koaStatsd = require('@short.io/koa-hot-shots');
var app = koa();

function statsd (path) {
  return async (ctx, next) => {
    const method = req.method || 'unknown_method';
    ctx.request.statsdKey = ['http', method.toLowerCase(), path].join('.');
    await next();
  };
}

app.use(koaStatsd());

app.get('/', statsd('home'), function (ctx) {
  ctx.body = 'Hello World!';
});

app.listen(3000);
```

A GET request to `/` on this server would produce the following stats:

```
http.get.home.status_code.200:1|c
http.get.home.response_time:100|ms
```

### Tags

You can set the tags of the metrics with the `req.statsdTags` property.

```JS

function statsd (path) {
  return async (ctx, next) => {
    const method = ctx.request.method || 'unknown_method';
    req.statsdKey = ['http', method.toLowerCase(), path].join('.');
    req.statsdTags = {
      server: process.env.SERVER_NAME,
    }
    await next();
  };
}
```

These will be sent with both the response time and status code metrics.

## Options

``` js
koaStatsd(options);
```

- **options** `Object` - Container for settings
  - **client** `HotShots instance` - a custom hot shots instance
  - **hotShots** `Object` - The hotShots options if you don't want to provide your own instance
  - **requestKey** `String` - The key on the `req` object at which to grab
the key for the statsd logs. Defaults to `req.statsdKey`.
npm package: @short.io/redux-beacon-amplitude
Description: Amplitude integration for Redux
Latest version: 2.0.0

### Description

This is a redux-beacon plugin or 'target' for sending page views, events, and more to Amplitude.

### Documention & Examples

 - [Getting Started Guide (Redux)](https://rangle.gitbook.io/redux-beacon/getting-started-redux-users)
 - [Getting Started Guide (Ngrx)](https://rangle.gitbook.io/redux-beacon/getting-started-ngrx-users)
 - [Amplitude Target API & Installation](https://rangle.gitbook.io/redux-beacon/index/amplitude)
npm package: @shortcm/banner
Description: Material Components for the web mixins + CSS Classes for Material Design banner
Latest version: 0.0.0

<!--docs:
title: "Banner"
layout: detail
section: components
excerpt: "Material Design-styled banner."
iconId: banner
path: /catalog/banner/
-->

# Banner

<!--<div class="article__asset">
  <a class="article__asset-link"
     href="https://material-components.github.io/material-components-web-catalog/#/component/elevation">
    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/elevation.png" width="247" alt="Elevation screenshot">
  </a>
</div>-->

A banner displays a prominent message and related optional actions.

## Design & API Documentation

<ul class="icon-list">
  <li class="icon-list-item icon-list-item--spec">
    <a href="https://material.io/go/design-banner">Material Design guidelines: Banner</a>
  </li>
  <li class="icon-list-item icon-list-item--link">
    <a href="">Demo</a>
  </li>
</ul>

## Installation

```
npm install @material/banner
```

## Basic Usage

### HTML

```html
  <div class="mdc-banner>
      <div class="mdc-banner__content">
        <svg class="mdc-banner__icon">
          ...
        </svg>
        <div class="mdc-typography--body2">
          Banner message.
        </div>
      </div>
      <div class="mdc-banner__actions">
        <button type="button" class="mdc-button mdc-banner__button">
          retry
        </button>
      </div>
  </div>
```

### Styles

```scss
@import "@material/banner/mdc-banner";
```
npm package: @shortcm/cloudfront-ip-ranges
Description: Get Cloudfront IPs for use in trust proxy configurations
Author: Nick Hammond
Latest version: 0.1.1

# Cloudfront IP ranges

[![npm](https://img.shields.io/npm/v/cloudfront-ip-ranges.svg?style=flat-square)](https://www.npmjs.com/package/cloudfront-ip-ranges)
![npm](https://img.shields.io/npm/dm/cloudfront-ip-ranges.svg?style=flat-square)
![Dependents (via libraries.io)](https://img.shields.io/librariesio/dependents/npm/cloudfront-ip-ranges.svg?style=flat-square)

Get Cloudfront IPs for use in trust proxy configurations.

This package will be updated if Cloudfront ever decides to change the endpoints for retrieving current IPs. We will most likely never see a breaking change for this package.

<br>
<p align="center">
  <img width="460" src="https://github.com/nhammond101/cloudfront-ip-ranges/raw/master/README-image.png?raw=true">
</p>

## Install

Requires node `8` or newer.

    npm install --save cloudfront-ip-ranges

## Usage

For use in an Express environment please see [Express documentation on trust proxies](https://expressjs.com/en/guide/behind-proxies.html).

It is recommended to use `setInterval` for updating the IP list periodically.

#### Directly update trust proxies for an Express app

    const cfIPranges = require('cloudfront-ip-ranges')

    cfIPranges.updateTrustProxy(app)
    
    setInterval(() => {
      cfIPranges.updateTrustProxy(app)
    }, 1000*60*60*12)

#### Getting a list of IPs and updating trust proxies manually

Useful if you need to list other proxies alongside the Cloudfront ones.

    const cfIPranges = require('cloudfront-ip-ranges')
    
    cfIPranges.updateIPs()
      .then((ips) => {
        app.set('trust proxy', ['loopback', ...ips])
      })

## API

Method | Info
------------ | -------------
getIpRange | By default returns `Promise<string[]>`.
updateTrustProxy | Takes an Express app instance as an argument. Returns `Promise<void>`.

## Changelog

Version | Release notes
------------ | -------------
0.1.0 | Initial release.
npm package: @shortcm/dom
Description: DOM manipulation utilities for Material Components for the web
Latest version: 0.41.1

<!--docs:
title: "DOM"
layout: detail
section: components
excerpt: "Provides commonly-used utilities for inspecting, traversing, and manipulating the DOM."
path: /catalog/dom/
-->

# DOM

MDC DOM provides commonly-used utilities for inspecting, traversing, and manipulating the DOM.

Most of the time, you shouldn't need to depend on `mdc-dom` directly. It is useful however if you'd like to write custom components that follow MDC Web's pattern and elegantly integrate with the MDC Web ecosystem.

## Installation

```
npm install @material/dom
```

## Basic Usage

```js
import * as ponyfill from '@material/dom/ponyfill';
```

> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.

## Ponyfill Functions

The `ponyfill` module provides the following functions:

Function Signature | Description
--- | ---
`closest(element: Element, selector: string) => ?Element` | Returns the ancestor of the given element matching the given selector (which may be the element itself if it matches), or `null` if no matching ancestor is found.
`matches(element: Element, selector: string) => boolean` | Returns true if the given element matches the given CSS selector.
npm package: @shortcm/react-button
Description: Material Components React Button
Latest version: 0.9.99

# React Button

A React version of an [MDC Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-button).

## Installation

```
npm install @material/react-button
```

## Usage

### Styles

with Sass:
```js
import '@material/react-button/index.scss';
```

with CSS:
```js
import '@material/react-button/dist/button.css';
```

### Javascript Instantiation
```js
import React from 'react';
import Button from '@material/react-button';

class MyApp extends React.Component {
  render() {
    return (
      <Button>
        Click Me!
      </Button>
    );
  }
}
```

## Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the root element.
raised | Boolean | Enables raised variant.
unelevated | Boolean | Enables unelevated variant.
outlined | Boolean | Enables outlined variant.
dense | Boolean | Enables dense variant.
icon | Element | Icon to render within root element.
trailingIcon | Element | Icon to render on the right side of the element
children | String | Text to be displayed within root element.
disabled | Boolean | Disables button if true.
href | String | Sets a hyperlink & uses anchor tag instead of a button.

## Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the
MDC Web repository for more information on what mixins are available, and how to use them.

[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/master/packages/mdc-button/README.md#sass-mixins)

## Usage with Icons

Please see our [Best Practices doc](../../docs/best-practices.md#importing-font-icons) when importing or using icon fonts.
npm package: @shortcm/react-dialog
Description: Material Components React Button
Latest version: 0.8.92

# React Button

A React version of an [MDC Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-button).

## Installation

```
npm install @material/react-button
```

## Usage

### Styles

with Sass:
```js
import '@material/react-button/index.scss';
```

with CSS:
```js
import '@material/react-button/dist/button.css';
```

### Javascript Instantiation
```js
import React from 'react';
import Button from '@material/react-button';

class MyApp extends React.Component {
  render() {
    return (
      <Button>
        Click Me!
      </Button>
    );
  }
}
```

## Props

Prop Name | Type | Description
--- | --- | ---
className | String | Classes to be applied to the root element.
raised | Boolean | Enables raised variant.
unelevated | Boolean | Enables unelevated variant.
outlined | Boolean | Enables outlined variant.
dense | Boolean | Enables dense variant.
icon | Element | Icon to render within root element.
children | String | Text to be displayed within root element.
disabled | Boolean | Disables button if true.
href | String | Sets a hyperlink & uses anchor tag instead of a button.

## Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the
MDC Web repository for more information on what mixins are available, and how to use them.

[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/master/packages/mdc-button/README.md#sass-mixins)

## Usage with Icons

Please see our [Best Practices doc](../../docs/best-practices.md#importing-font-icons) when importing or using icon fonts.
npm package: @shortcm/react-snackbar
Description: Material Components React Snackbar
Latest version: 0.8.3

# React Button

A React version of an [MDC Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar).

## Installation

```
npm install @material/react-snackbar
```

## Usage

### Styles

with Sass:
```js
import '@material/react-snackbar/index.scss';
```

with CSS:
```js
import '@material/react-snackbar/dist/snackbar.css';
```

### Javascript Instantiation
```js
import React from 'react';
import Button from '@material/react-snackbar';

class MyApp extends React.Component {
  render() {
    return (
      <Button>
        Click Me!
      </Button>
    );
  }
}
```

## Props

Prop Name | Type | Description
--- | --- | ---
message | String | Message to show in the snackbar
className | String | Classes to be applied to the root element.
timeoutMs | Number | Timeout in milliseconds when to close snackbar.
closeOnEscape | Boolean | Closes popup on "Esc" button if true.
actionText | String | Text for action button
leading | Boolean | Shows snackbar on the left if true (or right for rtl languages)
stacked | Boolean | Shows buttons under text if true
onBeforeOpen | Function() => void | Callback for handling event, which happens before opening
onOpen | Function(evt: Event) => void | Callback for handling event, which happens after opening
onBeforeClose | Function() => void | Callback for handling event, which happens before closing
onClose | Function() => void | Callback for handling event, which happens after closing

## Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the
MDC Web repository for more information on what mixins are available, and how to use them.

[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/master/packages/mdc-snackbar/README.md#sass-mixins)

## Usage with Icons

Please see our [Best Practices doc](../../docs/best-practices.md#importing-font-icons) when importing or using icon fonts.