open-index/open-npm huggingface dataset:
npm package: @simplefavor.xyz/simple-swiper
Description: A simple custom Swiper component for React
Latest version: 1.0.2

# @simplefavor.xyz/simple-swiper

A simple and customizable Swiper component for React applications.

## Installation

Install the package along with its peer dependencies:

```bash
npm install @simplefavor.xyz/simple-swiper swiper react-image-gallery
```

## Usage

1. Import the necessary CSS files in your main application file (e.g., App.js or index.js):

```javascript
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import "react-image-gallery/styles/css/image-gallery.css";
```

2. Use the SimpleSwiper component in your React application:

```jsx
import React from "react";
import { SimpleSwiper } from "@simplefavor.xyz/simple-swiper";

const MyComponent = () => {
  const images = [
    { path: "https://example.com/image1.jpg", width: 1920, height: 1080 },
    { path: "https://example.com/image2.jpg", width: 1920, height: 1080 },
    { path: "https://example.com/image3.jpg", width: 1920, height: 1080 },
  ];

  return (
    <div style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}>
      <SimpleSwiper images={images} />
    </div>
  );
};

export default MyComponent;
```

## Props

The SimpleSwiper component accepts the following props:

- `images` (required): An array of image objects, each containing:
  - `path`: URL or path to the image
  - `width`: Width of the image
  - `height`: Height of the image
- `loop` (optional): Boolean to enable/disable infinite loop. Default is `true`.
- `enableImageGallery` (optional): Boolean to enable/disable the full-screen image gallery feature. Default is `false`.

## Advanced Usage

### Enabling the Image Gallery

To enable the full-screen image gallery feature:

```jsx
<SimpleSwiper images={images} enableImageGallery={true} />
```

### Disabling the Loop

To disable the infinite loop:

```jsx
<SimpleSwiper images={images} loop={false} />
```

### Combining Options

You can combine multiple options:

```jsx
<SimpleSwiper images={images} enableImageGallery={true} loop={false} />
```

## Styling

The SimpleSwiper uses default styles from Swiper and react-image-gallery. You can override these styles in your CSS for customization:

```css
/* Example: Changing the pagination bullet color */
.swiper-pagination-bullet-active {
  background-color: #ff0000 !important;
}

/* Example: Changing the navigation arrow color */
.swiper-button-next,
.swiper-button-prev {
  color: #00ff00 !important;
}
```

## Troubleshooting

1. Ensure all peer dependencies (swiper, react-image-gallery) are installed.
2. Check that CSS files are imported correctly.
3. Verify that image paths are correct and accessible.
4. For any other issues, check the console for error messages.

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

This project is licensed under the MIT License.
npm package: @simplefe/image-preview
Description: ## Project setup ``` yarn install ```
Latest version: 0.2.6

# image-preview

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).