Tabs

19 |

20 | Tab 1 21 | 22 | Tab 2 23 | 24 | Tab 3 25 |

26 | 27 |

28 | 29 | 30 |

31 | In sociology, anthropology, and linguistics, structuralism is the 32 | methodology that implies elements of human culture must be understood 33 | by way of their relationship to a broader, overarching system or 34 | structure. It works to uncover the structures that underlie all the 35 | things that humans do, think, perceive, and feel. Alternatively, as 36 | summarized by philosopher Simon Blackburn, structuralism is "the 37 | belief that phenomena of human life are not intelligible except 38 | through their interrelations. These relations constitute a structure, 39 | and behind local variations in the surface phenomena there are 40 | constant laws of abstract structure". 41 |

42 | 43 | 44 | 45 |

46 | The input range must be a linear series of numbers. The output range 47 | can be any value type supported by Framer Motion: numbers, colors, 48 | shadows, etc. 49 |

50 | 51 | 52 | 53 |

54 | Creates a MotionValue that, when set, will use a spring animation to 55 | animate to its new state. 56 |

57 | 58 |

59 | 60 | ) 61 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React, { 2 | createContext, 3 | useState, 4 | useMemo, 5 | useContext, 6 | cloneElement, 7 | isValidElement 8 | } from 'react' 9 | 10 | import useConstant from 'use-constant' 11 | 12 | const TabsState = createContext() 13 | const Elements = createContext() 14 | 15 | export const Tabs = ({ state: outerState, children }) => { 16 | const innerState = useState(0) 17 | const elements = useConstant(() => ({ tabs: 0, panels: 0 })) 18 | const state = outerState || innerState 19 | 20 | return ( 21 | 22 | {children} 23 | 24 | ) 25 | } 26 | 27 | export const useTabState = () => { 28 | const [activeIndex, setActive] = useContext(TabsState) 29 | const elements = useContext(Elements) 30 | 31 | const tabIndex = useConstant(() => { 32 | const currentIndex = elements.tabs 33 | elements.tabs += 1 34 | 35 | return currentIndex 36 | }) 37 | 38 | const onClick = useConstant(() => () => setActive(tabIndex)) 39 | 40 | const state = useMemo( 41 | () => ({ 42 | isActive: activeIndex === tabIndex, 43 | onClick 44 | }), 45 | [activeIndex, onClick, tabIndex] 46 | ) 47 | 48 | return state 49 | } 50 | 51 | export const usePanelState = () => { 52 | const [activeIndex] = useContext(TabsState) 53 | const elements = useContext(Elements) 54 | 55 | const panelIndex = useConstant(() => { 56 | const currentIndex = elements.panels 57 | elements.panels += 1 58 | 59 | return currentIndex 60 | }) 61 | 62 | return panelIndex === activeIndex 63 | } 64 | 65 | export const Tab = ({ children }) => { 66 | const state = useTabState() 67 | 68 | if (typeof children === 'function') { 69 | return children(state) 70 | } 71 | 72 | return isValidElement(children) ? cloneElement(children, state) : children 73 | } 74 | 75 | export const Panel = ({ active, children }) => { 76 | const isActive = usePanelState() 77 | 78 | return isActive || active ? children : null 79 | } 80 | -------------------------------------------------------------------------------- /example/src/animated-tabs.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef, useEffect, cloneElement } from 'react' 2 | import { Tabs, useTabState, Panel } from '@bumaga/tabs' 3 | import { motion, AnimatePresence } from 'framer-motion' 4 | 5 | const cn = (...args) => args.filter(Boolean).join(' ') 6 | 7 | const Tab = ({ children }) => { 8 | const { isActive, onClick } = useTabState() 9 | 10 | return ( 11 | 14 | ) 15 | } 16 | 17 | const PanelList = ({ state, children }) => { 18 | const panelRef = useRef() 19 | const [height, set] = useState(0) 20 | const [activeIndex] = state 21 | 22 | useEffect(() => { 23 | panelRef.current && set(panelRef.current.offsetHeight) 24 | }, [activeIndex, set]) 25 | 26 | return ( 27 | 28 | 29 | 37 | {cloneElement(children[activeIndex], { active: true })} 38 | 39 | 40 | 41 | ) 42 | } 43 | 44 | export default () => { 45 | const state = useState(0) 46 | 47 | return ( 48 | 49 |

50 |

51 | Tab 1 52 | 53 | Tab 2 54 | 55 | Tab 3 56 |

57 | 58 |

59 | 60 | 61 | 62 |

animations with framer/motion

63 | 64 | 65 | 66 |

is pure

67 | 68 | 69 | 70 |

❤️

71 | 72 | 73 |

74 | 75 | ) 76 | } 77 | -------------------------------------------------------------------------------- /example/src/accordion.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Tabs, useTabState, usePanelState } from '@bumaga/tabs' 3 | import { motion } from 'framer-motion' 4 | 5 | import './accordion.css' 6 | 7 | const cn = (...args) => args.filter(Boolean).join(' ') 8 | 9 | const Tab = ({ children }) => { 10 | const { isActive, onClick } = useTabState() 11 | 12 | return ( 13 | 19 | ) 20 | } 21 | 22 | const panel = { 23 | hidden: { height: 0 }, 24 | visible: { height: 'auto' } 25 | } 26 | 27 | const Panel = ({ children }) => { 28 | const isActive = usePanelState() 29 | 30 | return ( 31 | 36 | {children} 37 | 38 | ) 39 | } 40 | 41 | export default () => { 42 | return ( 43 | 44 |

45 | Tab 1 46 | 47 |

48 | Creates a MotionValue that, when set, will use a spring animation to 49 | animate to its new state. 50 |

51 | 52 | 53 | Tab 2 54 | 55 |

56 | In sociology, anthropology, and linguistics, structuralism is the 57 | methodology that implies elements of human culture must be 58 | understood by way of their relationship to a broader, overarching 59 | system or structure. It works to uncover the structures that 60 | underlie all the things that humans do, think, perceive, and feel. 61 | Alternatively, as summarized by philosopher Simon Blackburn, 62 | structuralism is "the belief that phenomena of human life are not 63 | intelligible except through their interrelations. These relations 64 | constitute a structure, and behind local variations in the surface 65 | phenomena there are constant laws of abstract structure". 66 |

67 | 68 | 69 | Tab 3 70 | 71 |

72 | The input range must be a linear series of numbers. The output range 73 | can be any value type supported by Framer Motion: numbers, colors, 74 | shadows, etc. 75 |

76 | 77 |

78 | 79 | ) 80 | } 81 | -------------------------------------------------------------------------------- /example/src/height-tabs.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef, useEffect, cloneElement } from 'react' 2 | import { Tabs, useTabState, Panel } from '@bumaga/tabs' 3 | import { motion } from 'framer-motion' 4 | 5 | const cn = (...args) => args.filter(Boolean).join(' ') 6 | 7 | const Tab = ({ children }) => { 8 | const { isActive, onClick } = useTabState() 9 | 10 | return ( 11 | 14 | ) 15 | } 16 | 17 | const PanelList = ({ state, children }) => { 18 | const panelRef = useRef() 19 | const [height, set] = useState(0) 20 | const [activeIndex] = state 21 | 22 | useEffect(() => { 23 | set(panelRef.current.offsetHeight) 24 | }, [activeIndex, set]) 25 | 26 | return ( 27 | 28 |

29 | {cloneElement(children[activeIndex], { active: true })} 30 |

31 | 32 | ) 33 | } 34 | 35 | export default () => { 36 | const state = useState(0) 37 | 38 | return ( 39 | 40 |

41 |

42 | Tab 1 43 | 44 | Tab 2 45 | 46 | Tab 3 47 |

48 | 49 |

50 | 51 | 52 | 53 |

54 | In sociology, anthropology, and linguistics, structuralism is the 55 | methodology that implies elements of human culture must be 56 | understood by way of their relationship to a broader, overarching 57 | system or structure. It works to uncover the structures that 58 | underlie all the things that humans do, think, perceive, and feel. 59 | Alternatively, as summarized by philosopher Simon Blackburn, 60 | structuralism is "the belief that phenomena of human life are not 61 | intelligible except through their interrelations. These relations 62 | constitute a structure, and behind local variations in the surface 63 | phenomena there are constant laws of abstract structure". 64 |

65 | 66 | 67 | 68 |

69 | The input range must be a linear series of numbers. The output 70 | range can be any value type supported by Framer Motion: numbers, 71 | colors, shadows, etc. 72 |

73 | 74 | 75 | 76 |

77 | Creates a MotionValue that, when set, will use a spring animation 78 | to animate to its new state. 79 |

80 | 81 | 82 |

83 | 84 | ) 85 | } 86 | --------------------------------------------------------------------------------

Hello World 📦 🚀

Tabs with hooks 🎣

So nice 🚨