https://github.com/nikpundik/use-dark
A canvas based hook for sliding images, inspired by Netflix's Dark opening theme.
https://github.com/nikpundik/use-dark
canvas dark hooks netflix react
Last synced: 25 days ago
JSON representation
A canvas based hook for sliding images, inspired by Netflix's Dark opening theme.
- Host: GitHub
- URL: https://github.com/nikpundik/use-dark
- Owner: nikpundik
- Created: 2020-06-16T15:25:45.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T09:05:25.000Z (over 2 years ago)
- Last Synced: 2024-10-05T23:17:43.358Z (7 months ago)
- Topics: canvas, dark, hooks, netflix, react
- Language: JavaScript
- Homepage: https://use-dark.vercel.app/
- Size: 210 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Use Dark
:warning: Experimental WIP :warning:
A canvas based hook for sliding images, inspired by Netflix's Dark opening theme.
Demo @ https://use-dark.vercel.app/
## Requisites
React 16.8+
## Installation
```
npm install --save use-dark
```
## Usage
#### With a single image
```react
import React from 'react';
import useDark from 'use-dark';
import imgSrc from './dark.jpg';
function App() {
const ref = useDark(imgSrc);
return (
);
}
export default App;
```
#### With a series of images
```react
import React, { useState, useEffect } from 'react';
import useDark from 'use-dark';
import img1Src from './dark1.jpg';
import img2Src from './dark2.jpg';
const images = [img1Src, img2Src];
function App() {
const [index, setIndex] = useState(0);
const ref = useDark(images[index]);
useEffect(() => {
const i = setInterval(() => {
setIndex((c) => (c < images.length - 1 ? c + 1 : 0));
}, 5000);
return () => clearInterval(i);
}, []);
return (
);
}
export default App;
```
#### With configurable options and React Spring
```react
import React, { useState, useEffect, useCallback } from 'react';
import { useSpring, animated } from 'react-spring';
import useDark from 'use-dark';
import img1Src from './dark1.jpg';
const slides = [
{
dark: {
image: img1Src,
type: 3,
speed: 0.3,
responsive: [
[600, 1],
[800, 2],
],
},
data: {
text: 'USE DARK',
subtext: (
canvas based react hook
),
},
},
{
dark: {
image: 'https://external.url/image.jpg',
type: 4,
speed: 0.4,
responsive: [
[600, 1],
[800, 3],
],
},
data: {
text: 'INSTALL',
subtext: (
npm install use-dark
),
},
},
];
function App() {
const [slide, setSlide] = useState({
index: 0,
data: {},
dark: slides[0].dark,
});
const [fading, setFading] = useState(true);
const props = useSpring({ opacity: fading ? 0 : 1 });
const onFadeOut = useCallback(() => {
setFading(true);
}, []);
const onFadeIn = useCallback(() => {
setFading(false);
setSlide((prev) => ({ ...prev, data: slides[prev.index].data }));
setTimeout(() => {
setSlide((prev) => {
const index = prev.index < slides.length - 1 ? prev.index + 1 : 0;
return {
...prev,
index,
dark: slides[index].dark,
};
});
}, 5000);
}, []);
const { data, dark } = slide;
const ref = useDark(dark, onFadeIn, onFadeOut);
return (
{data.text}
{data.subtext}
);
}
export default App;
```
## Changelog
### 0.1.2
- responsive option: it supports a list of integers couples with the form of [breakpoint, type]
- onFadeIn / onFadeOut callbacks revised: it enables a better synchronization with external animation or music
### 0.1.1
- initial release
## License
[MIT](https://choosealicense.com/licenses/mit/)