Skip to content

Instantly share code, notes, and snippets.

Konstantin koss-lebedev

Block or report user

Report or block koss-lebedev

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
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)"
}));
View styles-2.scss
.container {
display: flex;
overflow-x: scroll;
width: 100%;
padding: 20px 0;
}
You can’t perform that action at this time.