Skip to content

Instantly share code, notes, and snippets.

Avatar

Konstantin koss-lebedev

View GitHub Profile
View KanyeQuote.tsx
import * as React from "react"
import { Quote } from "./canvas"
export function KanyeQuote() {
const [quote, setQuote] = React.useState("")
React.useEffect(() => {
fetch("https://api.kanye.rest/").then(response => {
response.json().then(json => {
setQuote(json.quote)
View Posts.tsx
import React from 'react'
import fetch from 'isomorphic-fetch'
import { NextFunctionComponent, NextContext } from 'next'
type InitialProps = PromiseResult<ReturnType<typeof getInitialProps>>
type Props = InitialProps
type Context = NextContext<{ subreddit: string }>
const Posts: NextFunctionComponent<Props, InitialProps, Context> = ({ posts, subreddit }) => (
<div>
View App.tsx
import React from "react"
import { useSpring, animated } from "react-spring"
const App = () => {
const [isExpanded, setExpanded] = React.useState(false);
const ref = React.useRef<HTMLDivElement>(null);
const style = useSpring({
width: isExpanded ? vwToPixel(100) : "200px",
height: isExpanded ? vhToPixel(100) : "200px",
View spring-using-utils.tsx
const style = useSpring({
width: isExpanded ? vwToPixel(100) : "200px",
height: isExpanded ? vhToPixel(100) : "200px",
borderRadius: isExpanded ? "0px" : "10px",
})
View App.tsx
import React from "react"
import { useSpring, animated } from "react-spring"
const App = () => {
const [isExpanded, setExpanded] = React.useState(false);
const style = useSpring({
width: isExpanded ? "100vw" : "200px",
height: isExpanded ? "100vh" : "200px",
borderRadius: isExpanded ? "0px" : "10px",
View utils.js
const vhToPixel = value => `${(window.innerHeight * value) / 100}px`
const vwToPixel = value => `${(window.innerWidth * value) / 100}px`
View clamp.ts
const clamp = (value: number, clampAt: number = 30) => {
if (value > 0) {
return value > clampAt ? clampAt : value;
} else {
return value < -clampAt ? -clampAt : value;
}
};
View component-6.tsx
const bind = useScroll(event => {
set({
transform: `perspective(500px) rotateY(${
event.scrolling ? clamp(event.delta[0]) : 0
}deg)`
});
});
View component-5.tsx
import { useScroll } from "react-use-gesture";
const App = () => {
const [style, set] = useSpring(() => ({
transform: "perspective(500px) rotateY(0deg)"
}));
const bind = useScroll(event => {
set({
transform: `perspective(500px) rotateY(${
View component-4.tsx
const [style, set] = useSpring(() => ({
transform: "perspective(500px) rotateY(0deg)"
}));
You can’t perform that action at this time.