import './index.css' ; import { useNProgress } from '@tanem/react-nprogress' ; import React , { useState } from 'react' ; import ReactDOM from 'react-dom' ; import { BrowserRouter as Router , Link , NavLinkProps , Redirect , Route , RouteComponentProps , Switch , } from 'react-router-dom' ; import { CSSTransition , TransitionGroup } from 'react-transition-group' ; import Bar from './Bar' ; import Container from './Container' ; const styles = { } ; styles . fill = { bottom : 0 , left : 0 , position : 'absolute' , right : 0 , top : 0 , } ; styles . content = { ... styles . fill , textAlign : 'center' , top : '40px' , } ; styles . nav = { display : 'flex' , height : '40px' , margin : 0 , padding : 0 , position : 'absolute' , top : 0 , width : '100%' , } ; styles . navItem = { flex : 1 , listStyleType : 'none' , padding : '10px' , textAlign : 'center' , } ; styles . hsl = { ... styles . fill , color : 'white' , fontSize : '30px' , paddingTop : '20px' , } ; styles . rgb = { ... styles . fill , color : 'white' , fontSize : '30px' , paddingTop : '20px' , } ; const NavLink = ( props ) => ( < li style = { styles . navItem } > < Link { ... props } style = { { color : 'inherit' } } /> < /li>); const HSL = ( { match : { params } } ) => ( < div style = { { ... styles . fill , ... styles . hsl , background : `hsl(${ params . h }, ${ params . s }%, ${ params . l }%)` , } } > hsl ( { params . h } , { params . s } % , { params . l } % ) < /div>); const RGB = ( { match : { params } } ) => ( < div style = { { ... styles . fill , ... styles . rgb , background : `rgb(${ params . r }, ${ params . g }, ${ params . b })` , } } > rgb ( { params . r } , { params . g } , { params . b } ) < /div>); const Progress = ( { isAnimating } ) => { const { animationDuration , isFinished , progress } = useNProgress ( { isAnimating , } ) ; return ( < Container animationDuration = { animationDuration } isFinished = { isFinished } > < Bar animationDuration = { animationDuration } progress = { progress } / > { } < /Container>); } ; const AnimationExample = ( ) => { const [ isLoading , setIsLoading ] = useState ( false ) ; return ( < Router > < Route render = { ( { location } ) => ( < > { } < Progress isAnimating = { isLoading } key = { location . key } / > < div style = { styles . fill } > < Route exact path = "/" render = { ( ) => < Redirect to = "/hsl/10/90/50" / > } /> < ul style = { styles . nav } > < NavLink to = "/hsl/10/90/50" > Red < /NavLink> < NavLink to = "/hsl/120/100/40" > Green < /NavLink> < NavLink to = "/rgb/33/150/243" > Blue < /NavLink> < NavLink to = "/rgb/240/98/146" > Pink < /NavLink> < /ul> < div style = { styles . content } > < TransitionGroup > { } < CSSTransition classNames = "fade" key = { location . key } onEnter = { ( ) => { setIsLoading ( true ) ; } } onEntered = { ( ) => { setIsLoading ( false ) ; } } timeout = { 1200 } > < Switch location = { location } > < Route component = { HSL } exact path = "/hsl/:h/:s/:l" / > < Route component = { RGB } exact path = "/rgb/:r/:g/:b" / > < Route render = { ( ) => < div > Not Found < /div>}/ > < /Switch> < /CSSTransition> < /TransitionGroup> < /div> < /div> < />)}/ > < /Router>); } ; ReactDOM . render ( < AnimationExample />, document.getElementById('root'));