Skip to content

Instantly share code, notes, and snippets.

@addisonschultz
Created February 18, 2020 10:05
Show Gist options
  • Save addisonschultz/c67c0684cd6fc9f61149443667f856cf to your computer and use it in GitHub Desktop.
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
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 }
}
@gscottolson
Copy link

Thank you for this. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment