Gathering detailed insights and metrics for react-glidejs
Gathering detailed insights and metrics for react-glidejs
Gathering detailed insights and metrics for react-glidejs
Gathering detailed insights and metrics for react-glidejs
npm install react-glidejs
Typescript
Module System
Min. Node Version
Node Version
NPM Version
TypeScript (55.71%)
CSS (29.9%)
JavaScript (7.51%)
HTML (6.88%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
18 Stars
26 Commits
9 Forks
2 Watchers
23 Branches
3 Contributors
Updated on Apr 16, 2025
Latest Version
1.0.8
Package Id
react-glidejs@1.0.8
Unpacked Size
79.93 kB
Size
13.07 kB
File Count
15
NPM Version
6.14.4
Node Version
12.16.3
Cumulative downloads
Total Downloads
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
1
22
A React wrapper for glide.js.
1npm install --save react-glidejs
OR
yarn add react-glidejs
A lightweight React wrapper for Glide.js by @jedrzejchalubek. React-glidejs exposes all the options from the Glide.js API as props. View them all here: https://glidejs.com/docs/options/
Import the Glide
component. Every React node (either a DOM element or a JSX
Fragment) is treated as a slide. Some additional props have also been
added for easier customisation, e.g.leftArrowComponent
and
rightArrowComponent
props which accept a React node.
The goal is to keep the API surface as small and lightweight as possible, while
also providing an easy way for customisation in line with common React
patterns. Therefore, this library uses react-transition-group
under the hood
to provide an easy way to add custom slide animations.
1import React, { useRef } from 'react'; 2import Glide, { Slide } from 'react-glidejs'; 3 4import 'react-glidejs/dist/index.css'; 5import './transitions.css'; 6 7export default () => { 8 const gliderRef = useRef(null); 9 10 return ( 11 <div 12 className="App" 13 style={{ 14 background: '#1B262C', 15 }} 16 > 17 <Glide 18 ref={gliderRef} 19 throttle={0} 20 type="slider" 21 customSlideAnimation={{ 22 timeout: 500, 23 classNames: 'fade', 24 }} 25 peek={{ 26 before: 500, 27 after: 500, 28 }} 29 perView={1} 30 startAt={3} 31 slideClassName="slider__frame" 32 focusAt="center" 33 > 34 <Fragment> 35 1 36 </Fragment> 37 <Fragment> 38 2 39 </Fragment> 40 <Fragment> 41 3 42 </Fragment> 43 <Fragment> 44 4 45 </Fragment> 46 <Fragment> 47 5 48 </Fragment> 49 <Fragment> 50 6 51 </Fragment> 52 <Fragment> 53 7 54 </Fragment> 55 <Fragment> 56 8 57 </Fragment> 58 <Fragment> 59 9 60 </Fragment> 61 <Fragment> 62 10 63 </Fragment> 64 <Fragment> 65 11 66 </Fragment> 67 <Fragment> 68 12 69 </Fragment> 70 <Fragment> 71 13 72 </Fragment> 73 <Fragment> 74 14 75 </Fragment> 76 </Glide> 77 </div> 78 ); 79}; 80
MIT © jkhaui
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 2/17 approved changesets -- score normalized to 1
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
license file not detected
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
111 existing vulnerabilities detected
Details
Score
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