Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-sliderify

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-sliderify - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

3

dist/cjs/types/components/Sliderify/Sliderify.d.ts
import React from "react";
import "./Sliderify.scss";
import { SliderifyProps } from "../../store/index";
declare const Sliderify: ({ slides, autoPlay, slideDurationInSecs, showNavButtons, showNavDots, showSpot, color, activeColor, baseColor, rounded, slideDirection, showTitle, spotPlacement, dotsPlacement, keyboardNavigationOnFocus, transitionDurationInMS, disableInfiniteLoop, disableTransition, navPrevIcon, navNextIcon, clip, clipRight, children, className, }: SliderifyProps & ({
declare const Sliderify: ({ slides, autoPlay, slideDurationInSecs, showNavButtons, showNavDots, showSpot, color, activeColor, baseColor, rounded, slideDirection, showTitle, showSlideStatus, spotPlacement, dotsPlacement, keyboardNavigationOnFocus, transitionDurationInMS, disableInfiniteLoop, disableTransition, navPrevIcon, navNextIcon, clip, clipRight, children, className, }: SliderifyProps & ({
children: React.ReactNode;

@@ -5,0 +6,0 @@ } | {

2

dist/cjs/types/store/index.d.ts

@@ -16,2 +16,3 @@ import React from "react";

showTitle?: boolean;
showSlideStatus?: boolean;
color?: string;

@@ -62,2 +63,3 @@ activeColor?: string;

D_CLIP_RIGHT: boolean;
D_SHOW_SLIDE_STATUS: boolean;
};

@@ -64,0 +66,0 @@ export declare const defaultSliderState: SliderState;

3

dist/esm/types/components/Sliderify/Sliderify.d.ts
import React from "react";
import "./Sliderify.scss";
import { SliderifyProps } from "../../store/index";
declare const Sliderify: ({ slides, autoPlay, slideDurationInSecs, showNavButtons, showNavDots, showSpot, color, activeColor, baseColor, rounded, slideDirection, showTitle, spotPlacement, dotsPlacement, keyboardNavigationOnFocus, transitionDurationInMS, disableInfiniteLoop, disableTransition, navPrevIcon, navNextIcon, clip, clipRight, children, className, }: SliderifyProps & ({
declare const Sliderify: ({ slides, autoPlay, slideDurationInSecs, showNavButtons, showNavDots, showSpot, color, activeColor, baseColor, rounded, slideDirection, showTitle, showSlideStatus, spotPlacement, dotsPlacement, keyboardNavigationOnFocus, transitionDurationInMS, disableInfiniteLoop, disableTransition, navPrevIcon, navNextIcon, clip, clipRight, children, className, }: SliderifyProps & ({
children: React.ReactNode;

@@ -5,0 +6,0 @@ } | {

2

dist/esm/types/store/index.d.ts

@@ -16,2 +16,3 @@ import React from "react";

showTitle?: boolean;
showSlideStatus?: boolean;
color?: string;

@@ -62,2 +63,3 @@ activeColor?: string;

D_CLIP_RIGHT: boolean;
D_SHOW_SLIDE_STATUS: boolean;
};

@@ -64,0 +66,0 @@ export declare const defaultSliderState: SliderState;

3

dist/index.d.ts

@@ -17,2 +17,3 @@ import React from 'react';

showTitle?: boolean;
showSlideStatus?: boolean;
color?: string;

@@ -34,3 +35,3 @@ activeColor?: string;

declare const Sliderify: ({ slides, autoPlay, slideDurationInSecs, showNavButtons, showNavDots, showSpot, color, activeColor, baseColor, rounded, slideDirection, showTitle, spotPlacement, dotsPlacement, keyboardNavigationOnFocus, transitionDurationInMS, disableInfiniteLoop, disableTransition, navPrevIcon, navNextIcon, clip, clipRight, children, className, }: SliderifyProps & ({
declare const Sliderify: ({ slides, autoPlay, slideDurationInSecs, showNavButtons, showNavDots, showSpot, color, activeColor, baseColor, rounded, slideDirection, showTitle, showSlideStatus, spotPlacement, dotsPlacement, keyboardNavigationOnFocus, transitionDurationInMS, disableInfiniteLoop, disableTransition, navPrevIcon, navNextIcon, clip, clipRight, children, className, }: SliderifyProps & ({
children: React.ReactNode;

@@ -37,0 +38,0 @@ } | {

21

package.json
{
"name": "react-sliderify",
"version": "1.0.9",
"version": "1.1.0",
"description": "React Sliderify is a versatile and user-friendly slider package for React that makes it easy to create responsive sliders from any content. With a range of customizable options and intuitive configuration, you can turn anything into a slider in just a few simple steps. The package utilizes the latest React technology to ensure a smooth and seamless experience, making it the ideal solution for developers and designers looking to add dynamic, eye-catching sliders to their projects. Whether you're creating a product carousel, image gallery, or a simple content slider, React Slider Transformer provides the tools and functionality you need to get the job done quickly and efficiently. So why wait? Transform your content into a stunning, responsive slider today with React Slider Transformer!",

@@ -8,4 +8,3 @@ "scripts": {

"test": "jest",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
"deploy": "npm run rollup && npm publish"
},

@@ -38,11 +37,2 @@ "keywords": [

"@rollup/plugin-typescript": "^11.0.0",
"@storybook/addon-actions": "^6.5.16",
"@storybook/addon-essentials": "^6.5.16",
"@storybook/addon-interactions": "^6.5.16",
"@storybook/addon-links": "^6.5.16",
"@storybook/builder-webpack5": "^6.5.16",
"@storybook/manager-webpack5": "^6.5.16",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^6.5.16",
"@storybook/testing-library": "^0.0.13",
"@testing-library/react": "^13.4.0",

@@ -62,7 +52,5 @@ "@types/jest": "^29.4.0",

"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-scss": "^4.0.0",
"rollup-plugin-sass": "^1.12.17",
"rollup-plugin-terser": "^7.0.2",
"sass": "^1.58.0",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"tslib": "^2.5.0",

@@ -75,5 +63,2 @@ "typescript": "^4.9.5"

},
"dependencies": {
"react-icons": "^4.7.1"
},
"main": "dist/cjs/index.js",

@@ -80,0 +65,0 @@ "module": "dist/esm/index.js",

75

README.md

@@ -65,31 +65,54 @@ # React Sliderify

| Name | Value | Description |
| ------------------------- | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slides | `an array of objects` | An array of objects. Each object must contain a 'content' property, representing the slide content in the form of a JSX element. The 'title' property is optional and can be used to provide a descriptive heading for the slide. |
| autoPlay | `boolean` | Change the slide automatically based on `slideDurationInSecs` prop. |
| slideDurationInSecs | `number` | Measured in seconds, determines the frequency at which the slides advance automatically when the `autoPlay` option is enabled. The default interval is set to `10` seconds. |
| slideDirection | `left or right` | Direction of the slide. Defaults to `left` |
| showNavButtons | `boolean` | Hide or show the arrow navigation buttons. Defaults to `true`. |
| navPrevIcon | `any` | A custom element designated as the 'previous icon' which, upon click, navigates to the preceding slide. |
| navNextIcon | `any` | A custom element designated as the 'next icon' which, upon click, navigates to the next slide. |
| showNavDots | `boolean` | Hide or show the active slide indicators. Defaults to `true` |
| showSpot | `boolean` | Hide or show the circular spot which has been included as a stylistic feature by setting the relevant option. Defaults to `true`. |
| showTitle | `boolean` | When slides are supplied through the `slides` property, this option is to show or hide the accompanying title, if present. |
| color | `string` | Set the color of some elements like the circular spot if visible. |
| baseColor | `string` | Set the base color of the indicators |
| activeColor | `string` | Set the active color of the indicators. When a slide is active, the indicator lights up. |
| disableInfiniteLoop | `boolean` | This controls the activation or deactivation of the infinite loop feature. Defaults to `false`. |
| disableTransition | `boolean` | This controls the activation or deactivation of the transition animation. Defaults to `false`. |
| rounded | `boolean` | Add or remove rounded corners (border-radius). |
| transitionDurationInMS | `number` | Adjust the duration of the transition between slides. Defaults to `1000` ms (1 second). |
| spotPlacement | `top-left or top-right or bottom-left or bottom-right` | Set the postion of the circular spot slides wrapper. Defaults to `top-left`. |
| dotsPlacement | `outside or inside` | Set the position of the dot indicators, inside or outside the slides. Defaults to `outside`. |
| keyboardNavigationOnFocus | `boolean` | Control the slides with arrow keys on the keyboard when in focus. Defaults to `true`. |
| className | `string` | Additional class names for styling |
| clip | `boolean` | Add or remove clip-path CSS style. Defaults to `false`. |
| clipRight | `boolean` | Clip the top right of the slides wrapper. Just for additional styling. Defaults to `false`. |
| Name | Value | Description |
| ------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slides | `an array of objects` | An array of objects. Each object must contain a 'content' property, representing the slide content in the form of a JSX element. The 'title' property is optional and can be used to provide a descriptive heading for the slide. |
| autoPlay | `boolean` | Change the slide automatically based on `slideDurationInSecs` prop. |
| slideDurationInSecs | `number` | Measured in seconds, determines the frequency at which the slides advance automatically when the `autoPlay` option is enabled. The default interval is set to `10` seconds. |
| slideDirection | `left or right` | Direction of the slide. Defaults to `left` |
| showNavButtons | `boolean` | Hide or show the arrow navigation buttons. Defaults to `true`. |
| navPrevIcon | `any` | A custom element designated as the 'previous icon' which, upon click, navigates to the preceding slide. |
| navNextIcon | `any` | A custom element designated as the 'next icon' which, upon click, navigates to the next slide. |
| showSlideStatus | `boolean` | Display or conceal the status of the current active slide in relation to the total number of slides. Defaults to `false`. |
| showNavDots | `boolean` | Hide or show the active slide indicators. Defaults to `true` |
| showSpot | `boolean` | Hide or show the circular spot which has been included as a stylistic feature by setting the relevant option. Defaults to `true`. |
| showTitle | `boolean` | When slides are supplied through the `slides` property, this option is to show or hide the accompanying title, if present. |
| color | `string` | Set the color of some elements like the circular spot if visible. |
| baseColor | `string` | Set the base color of the indicators |
| activeColor | `string` | Set the active color of the indicators. When a slide is active, the indicator lights up. |
| disableInfiniteLoop | `boolean` | This controls the activation or deactivation of the infinite loop feature. Defaults to `false`. |
| disableTransition | `boolean` | This controls the activation or deactivation of the transition animation. Defaults to `false`. |
| rounded | `boolean` | Add or remove rounded corners (border-radius). |
| transitionDurationInMS | `number` | Adjust the duration of the transition between slides. Defaults to `1000` ms (1 second). |
| spotPlacement | `top-left or top-right or bottom-left or bottom-right` | Set the postion of the circular spot slides wrapper. Defaults to `top-left`. |
| dotsPlacement | `outside or inside` | Set the position of the dot indicators, inside or outside the slides. Defaults to `outside`. |
| keyboardNavigationOnFocus | `boolean` | Control the slides with arrow keys on the keyboard when in focus. Defaults to `true`. |
| className | `string` | Additional class names for styling |
| clip | `boolean` | Add or remove clip-path CSS style. Defaults to `false`. |
| clipRight | `boolean` | Clip the top right of the slides wrapper. Just for additional styling. Defaults to `false`. |
### Navigation arrows
By default, the navigation arrows are displayed. Should you require any adjustments or customization, you can utilize the navPrevIcon and navNextIcon properties to modify the appearance of the arrows. These can be replaced with text or a custom-styled element that includes animation. To demonstrate, here is an example that utilizes the `react-icons` library to incorporate a new set of arrows.
```javascript
import React from "react";
import {
BsArrowLeftSquare as LeftArrow,
BsArrowRightSquare as RightArrow,
} from "react-icons/bs";
import { Sliderify } from "react-sliderify";
<Sliderify navPrevIcon={<LeftArrow />} navNextIcon={<RightArrow />}>
<div>Slider 1</div>
<div>Slider 2</div>
<div>Slider 3</div>
</Sliderify>;
/// `navPrevIcon` and `navNextIcon` can be set to anything even strings. You can animate them as you see fit.
```
### Upcoming features
- Styling adjustment
- Drag and swipe

@@ -96,0 +119,0 @@ - Custom animation

dist/cjs/index.js

Sorry, the diff of this file is too big to display

dist/esm/index.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc