SHARE
TWEET

Untitled

a guest Aug 22nd, 2019 533 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from 'react'
  2. import { useSpring, animated, interpolate } from 'react-spring'
  3.  
  4. // let's add some transitions to the pager component when the activeIndex changes
  5. function Pager({ children, activeIndex }) {
  6.   const offset = activeIndex * 100 * -1
  7.  
  8.   // translateX will now represent a spring value that we will animate
  9.   // we'll set the initial value to our first offset here:
  10.   const [{ translateX }, set] = useSpring(() => ({
  11.     translateX: offset,
  12.   }))
  13.  
  14.   // when the offset updates, we want to update the translateX value
  15.   // so that the spring will fire again:
  16.   useEffect(() => {
  17.     set({ translateX: offset })
  18.   }, [offset, set])
  19.  
  20.   // update the container view to an animated.div
  21.   // we'll use the interpolate() function to translate with our spring values
  22.   // this gives us a nice spring animation to our page transitions
  23.   return (
  24.     <animated.div
  25.       style={{
  26.         border: 'thin solid blue',
  27.         position: 'relative',
  28.         height: '100%',
  29.         width: '100%',
  30.         transform: interpolate(
  31.           [translateX],
  32.           (translateX) => `translateX(${translateX}%)`,
  33.         ),
  34.       }}>
  35.       {React.Children.map(children, (element, index) => {
  36.         return (
  37.           <div
  38.             style={{
  39.               ...absoluteFill,
  40.               transform: `translateX(${index * 100}%)`,
  41.             }}>
  42.             {element}
  43.           </div>
  44.         )
  45.       })}
  46.     </animated.div>
  47.   )
  48. }
  49.  
  50.  
  51. const absoluteFill = {
  52.   position: 'absolute',
  53.   left: 0,
  54.   right: 0,
  55.   bottom: 0,
  56.   top: 0,
  57. }
  58.  
  59. const PAGE_SIZE = 200
  60.  
  61. // this will represent a consumer component or any part of your application
  62. function App() {
  63.   // all we need to pass are children and an activeIndex prop to our pager component
  64.   const [activeIndex, setActiveIndex] = useState(0)
  65.  
  66.   const children = Array.from({ length: 10 }).map((c, i) => (
  67.     <h1 key={i} style={{ textAlign: 'center' }}>
  68.       Index {i}
  69.     </h1>
  70.   ))
  71.  
  72.   return (
  73.     <div>
  74.       <div
  75.         style={{
  76.           width: PAGE_SIZE,
  77.           height: PAGE_SIZE,
  78.           display: 'flex',
  79.           margin: 'auto',
  80.           padding: '5px',
  81.           border: 'thin solid red',
  82.         }}>
  83.         <Pager activeIndex={activeIndex}>{children}</Pager>
  84.       </div>
  85.  
  86.       <div
  87.         style={{
  88.           display: 'flex',
  89.           flexDirection: 'column',
  90.           alignItems: 'center',
  91.           justifyContent: 'space-around',
  92.         }}>
  93.         <strong style={{ margin: '5px 0' }}>activeIndex: {activeIndex}</strong>
  94.         <button
  95.           style={{ margin: '5px 0' }}
  96.           onClick={() => setActiveIndex(activeIndex + 1)}>
  97.           Increment
  98.         </button>
  99.         <button
  100.           style={{ margin: '5px 0' }}
  101.           onClick={() => setActiveIndex(activeIndex - 1)}>
  102.           Decrement
  103.         </button>
  104.       </div>
  105.     </div>
  106.   )
  107. }
  108.  
  109. export default App
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top