koss-lebedev

const useUsers = () => {
  const [users, setUsers] = useState([])
  
  useEffect(() => {
    const loadUsers = async () => {  
      const response = await fetch('/some-api')
      const data = await response.json()
      setUsers(data)
    }

koss-lebedev

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)

koss-lebedev

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>

koss-lebedev

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",

koss-lebedev

const style = useSpring({
  width: isExpanded ? vwToPixel(100) : "200px",
  height: isExpanded ? vhToPixel(100) : "200px",
  borderRadius: isExpanded ? "0px" : "10px",
})

koss-lebedev

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",

koss-lebedev

const vhToPixel = value => `${(window.innerHeight * value) / 100}px`
const vwToPixel = value => `${(window.innerWidth * value) / 100}px`

koss-lebedev

const clamp = (value: number, clampAt: number = 30) => {
  if (value > 0) {
    return value > clampAt ? clampAt : value;
  } else {
    return value < -clampAt ? -clampAt : value;
  }
};

koss-lebedev

const bind = useScroll(event => {
  set({
    transform: `perspective(500px) rotateY(${
      event.scrolling ? clamp(event.delta[0]) : 0
    }deg)`
  });
});

koss-lebedev

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(${