open-index/open-npm huggingface dataset:
npm package: @marimo-team/react-slotz
Description: Teleport React components into anywhere into the react-tree.
Author: marimo
Latest version: 0.2.0

# Slotz

Teleport React components to anywhere in the react-tree.

> Modernized from [react-slot-fill](https://github.com/camwest/react-slot-fill)

## Installation

```bash
npm install @marimo-team/react-slotz
# or
pnpm install @marimo-team/react-slotz
```

## Example

```tsx
// slotz.js
const Toolbar = () => {
  return (
    <nav>
      <Slot name="Toolbar.Item" />
    </nav>
  );
};
Toolbar.Item = ({ label }: { label: string }) => (
  <Fill name="Toolbar.Item">
    <button>{label}</button>
  </Fill>
);

const Footer = () => {
  return (
    <footer>
      <Slot name="Footer.Item" />
    </footer>
  );
};
Footer.Item = ({ href, label }: { href: string; label: string }) => (
  <Fill name="Footer.Item">
    <a href={href}>{label}</a>
  </Fill>
);

// my-page.js
const Feature = () => {
  return (
    <div>
      <Toolbar.Item label="Home 2" />
      <Toolbar.Item label="About" />
      <Footer.Item label="Twitter" href="twitter.com/reactjs" />
    </div>
  );
};

const MyPage = () => {
  return (
    <Provider>
      <div className="main">
        <Toolbar />
        <Footer />
        <Feature />
      </div>
    </Provider>
  );
};

// HTML
<div className="main">
  <nav>
    <button>Home 2</button>
    <button>About</button>
  </nav>
  <footer>
    <a href="twitter.com/reactjs">Twitter</a>
  </footer>
  <div />
</div>;
```
npm package: @marimuthuraja/react-slide-rule-v2
Description: A React component allowing users to select a value along a subjective range and step.
Author: Jae Yong Park
Latest version: 1.1.0

# react-slide-rule

[![npm](https://img.shields.io/npm/v/react-slide-rule.svg)](https://www.npmjs.com/package/react-slide-rule)
[![npm](https://img.shields.io/npm/l/react-slide-rule.svg)](https://www.npmjs.com/package/react-slide-rule)

React-slide-rule is a React component shaped like a ruler/slide rule, allowing users to select a value along a subjective range and step.

> More demos available [here](https://loput12ouj35.github.io/React-slide-rule/)!

![examples](https://github.com/loput12ouj35/React-slide-rule/raw/main/docs/examples.gif)

## Installation

```shell
npm install react-slide-rule
```

## Simple example

![simple-example](https://github.com/loput12ouj35/React-slide-rule/raw/main/docs/simple-example.gif)

```jsx
import React, { useState } from 'react';
import SlideRule from 'react-slide-rule';

const STYLE = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
};

export default function () {
  const [value, setValue] = useState(150);

  return (
    <div style={STYLE}>
      <p>{value}</p>
      <SlideRule value={value} onChange={setValue} />
    </div>
  );
}
```

## More examples

Check out the [example codes](https://github.com/loput12ouj35/React-slide-rule/tree/main/example-demo-app/src/Examples) in the repository, or [demos](https://loput12ouj35.github.io/React-slide-rule/).

## Props

A list of all props available [here](https://github.com/loput12ouj35/React-slide-rule/tree/main/docs/props.md).

> Hint: Use suggestion/auto complete to find the props in your code editor.

## License

This project is licensed under the [MIT license](https://github.com/loput12ouj35/React-slide-rule/blob/main/LICENSE).
npm package: @marin.begovic/vue-rinma-360
Description: A Simple and Beautiful 360 viewer for your product
Author: Marin Begovic
Latest version: 0.1.6

# vue-360
- A Simple and Beautiful 360&deg; Product Viewer built on Vue.js

### [Click here for React Version](https://github.com/rajeevgade/react-360)

## Demo

![Preview](https://www.techsolate.com/vue-360-viewer/demo.gif)

[Demo](https://vue-360.now.sh/) | [Documentation](https://rajeevgade.github.io/vue-360)

## Features

- 360&deg; View
- Zoom
- Pan
- Autoplay (Loops)
- Full Screen Mode
- Spin Direction
- Image Caching
- Mobile Responsive
- Touch Events


## Installation
```
npm install vue-360
```

## Config

```
import VueThreeSixty from 'vue-360'

import 'vue-360/dist/css/style.css'

Vue.use(VueThreeSixty)
```

## Example
```
<vue-three-sixty 
  :amount=36
  imagePath="https://scaleflex.cloudimg.io/width/600/q35/https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/demo/chair-360-36"
  fileName="chair_{index}.jpg?v1"
/>
```
### Adding a Header
```
<template v-slot:header>
  <div class="v360-header text-light bg-dark">
      <span class="v360-header-title">36 Images - Autoplay (1 loop) - Reverse Spin</span>
      <span class="v360-header-description"></span>
  </div>
</template>
```

### Icons
- The icons used in the demo are from fontawesome. Add the following in your header to display the icons.
```
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css">
```

## Props

| Name | Type | Description | Required | Default Value |
| --- | --- | --- | --- | --- |
| amount | Number | Number of images | Yes |
| imagePath | String | Path to your image | Yes |
| fileName | String | File name format | Yes |
| spinReverse | Boolean | Reverse Spin | Optional | false |
| autoplay | Number | Autoplay your images | Optional | 24 |
| loop | Number | Number of loops you want to autoplay | Optional | 1 |
| boxShadow | Boolean | Apply Box Shadow Background | Optional | false |
| buttonClass | String | Apply Styling to Buttons | Optional (light/dark) | light |
| paddingIndex | Boolean | Apply Leading Zero to Image Index | Optional | false |
| disableZoom | Boolean | Disable Zoom Functionality | Optional | false |
| scrollImage | Boolean | Scroll Images instead of Default Zoom | Optional | false |

## Buttons 

(In order from left to right)

- Play/Pause
- Zoom In
- Zoom Out
- Pan / 360&deg; Mode
- Move Left
- Move Right
- Reset Position


## Roadmap

- Hotspots
- Lazyloading
- Custom CSS Classes
- Custom Buttons
- And a few more ...

## Credits

- [vue](https://vuejs.org/)
- [vue2-hammer](https://hammerjs.github.io/)
- [core-js](https://github.com/zloirock/core-js)
- [Cloud Image](https://www.cloudimage.io/)