Gathering detailed insights and metrics for react-tiny-slider
Gathering detailed insights and metrics for react-tiny-slider
Installations
npm install react-tiny-sliderDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.11.1
NPM Version
10.2.4
Languages
4
TypeScript
CSS
HTML
JavaScript
TypeScript (84.11%)
CSS (8.42%)
HTML (4.21%)
JavaScript (3.25%)
Developer
Maclay74
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
7 Stars
17 Commits
2 Watchers
3 Branches
1 Contributors
Updated on Dec 29, 2024
Maintainers
1
Package Meta Information
Latest Version
2.0.8
Package Id
react-tiny-slider@2.0.8
Unpacked Size
35.33 kB
Size
6.99 kB
File Count
11
NPM Version
10.2.4
Node Version
20.11.1
Published on
Apr 04, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
React Tiny Slider
Tiny slider wrapper for React
Motivation
There are a lot of other solutions for gallery sliders, and all of them have pros and cons, obviously. But all of them doesn't have so much functions as tiny slider has but have a lot of bugs instead.
I went thought all of them, tested and checked, and no one fulfilled my demand. Although, there is a tiny slider, which works like a charm (mostly) and the only thing left is to just wrap it.
And they did! There are currently two other solutions for React + Tiny slider, but both of them doesn't appreciate dynamic content changing. When you try to update your Carousel children, you get an error, period.
So, I decided to fix this and rewrite it in TypeScript, for the sake of usability.
Install
1yarn add react-tiny-slider
Usage
Nothing special, just import component. All props are tiny slider settings. (See below)
You can find a complete example with two carousels in example folder, but if you're lazy, there is one more:
1import React, { Component } from 'react' 2import Carousel from 'react-tiny-slider' 3 4class Example extends Component { 5 render() { 6 return ( 7 <Carousel 8 swipeAngle={false} 9 items={3} 10 mouseDrag 11 ref={carousel} 12 controls={false} 13 nav={false} 14 > 15 {slides.map((slide) => { 16 return ( 17 <div> 18 <div className={'slide'}>{slide}</div> 19 </div> 20 ) 21 })} 22 </Carousel> 23 ) 24 } 25}
Slides
Use children prop to pass slides. Important thing to remember - they all are going to be converted to pure html, so no React shit (events, etc) is allowed.
Control carousel
Pass ref prop to the Carousel to get TinySlider instance. Then you can call it's functions, just like that
1// Import useRef 2import React, { useRef } from 'react' 3 4// In component, create ref 5const carousel = useRef(null) 6 7// Call tinyslider's methods 8const goNextSlide = () => carousel.current.goTo('next')
And then how do I suppose to handle click event on slide, genius?
Pass onClick prop to the Carousel component, you'll get clicked slide position, information about slider and event itself.
1onClick={(slideIndex, info, event) => { 2 // Do something 3}}
License
MIT © Maclay74
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/Maclay74/react-tiny-slider/deploy.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/Maclay74/react-tiny-slider/deploy.yml/master?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 1 out of 1 npmCommand dependencies pinned
Reason
Found 0/17 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/deploy.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
15 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3
- Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-x574-m823-4x7w
- Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8
- Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x
- Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4
- Warn: Project is vulnerable to: GHSA-859w-5945-r5v3
Score
2.4
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More