open-index/open-npm huggingface dataset:
npm package: @rypen-dev/dealer-shared-components
Description: Shared styles and Vuejs ui components for dealer sites built on the Rypen framework.
Latest version: 1.0.51

# @rypen-dev/dealer-shared-components

[![npm (scoped)](https://img.shields.io/npm/v/@rypen-dev/dealer-shared-components.svg)](https://www.npmjs.com/package/@rypen-dev/dealer-shared-components)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@rypen-dev/dealer-shared-components.svg)](https://www.npmjs.com/package/@rypen-dev/dealer-shared-components)

Shared styles and Vuejs ui components for dealer sites built on the Rypen framework.

## Install

```
$ npm install @rypen-dev/dealer-shared-components
```

## Usage

### Shared styles
In the project's .scss file, import the shared styles from the package.

```css
@import '~@rypen-dev/dealer-shared-components/scss/styles';
```

To reference the shared variables, include the reference line in other .scss files.
```css
/// <reference path="../../node_modules/@rypen-dev/dealer-shared-components/scss/variables" />
```

### Vuejs components
npm package: @rypen-dev/react-shared-components
Description: Shared styles and React ui components for Rypen projects.
Latest version: 2.5.10

# @rypen-dev/react-shared-components

[![npm (scoped)](https://img.shields.io/npm/v/@rypen-dev/react-shared-components.svg)](https://www.npmjs.com/package/@rypen-dev/react-shared-components)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@rypen-dev/react-shared-components.svg)](https://www.npmjs.com/package/@rypen-dev/react-shared-components)

Shared styles and React ui components for Rypen projects.

## Install

```
$ npm install @rypen-dev/react-shared-components
```

## Usage

### Shared styles
In the project's .scss file, import the shared styles from the package.

```css
@import '~@rypen-dev/react-shared-components/scss/styles';
```

To reference the shared variables, include the reference line in other .scss files.
```css
/// <reference path="../../node_modules/@rypen-dev/react-shared-components/scss/variables" />
```

### React components

#### Loader
Animated circle for indicating loading state.
```js
import { Loader } from "@rypen-dev/react-shared-components";

<script>
    ...
    render() {
        return (<div>
            <Loader />
        </div>)
    }
    ...
</script>
```