Created
February 18, 2020 10:05
-
-
Save addisonschultz/c67c0684cd6fc9f61149443667f856cf to your computer and use it in GitHub Desktop.
An Override file that lets you control the Page component as a Slides component with arrow keys in Framer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Override, Data } from "framer" | |
import * as React from "react" | |
const slideData = Data({ currentSlide: 0 }) | |
export function SlideControls(props): Override { | |
// This sets the slidesNumber dynamically from the Page component | |
const slidesNumber = React.Children.toArray(props.children)[0].props | |
.children.length | |
// This creates a listener for the arrow keys | |
React.useEffect(() => { | |
function pressKey(event) { | |
if (event.key === "ArrowRight") goRight() | |
if (event.key === "ArrowLeft") goLeft() | |
} | |
document.addEventListener("keydown", pressKey) | |
return function removeListener() { | |
document.removeEventListener("keydown", pressKey) | |
} | |
}) | |
// These navigate through the slides | |
function goRight() { | |
if (slideData.currentSlide < slidesNumber - 1) slideData.currentSlide++ | |
} | |
function goLeft() { | |
if (slideData.currentSlide > 0) slideData.currentSlide-- | |
} | |
return { currentPage: slideData.currentSlide } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for this. 👍