react-fade-in, react-fade 라이브러리

react-fade-in (fade in 효과)

-설치 : npm install react-fade-in

 

-사용

import FadeIn from 'react-fade-in';
// ...
<FadeIn>
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
  <div>Element 4</div>
  <div>Element 5</div>
  <div>Element 6</div>
</FadeIn>

 

 

-props : delay, transitionDuration, className 등..

 

https://www.npmjs.com/package/react-fade-in

 

 

react-fade (fade in & out 효과)

Fade 사용 시 Can't resolve 'inline-style-prefixer' in ... 라는 에러가 발생함.

-> inline-style-prefixer 라이브러리를 다운하는 시도를 했으나 성공하기 어려웠음

-> react-animation 사용으로 대체 (React에서 Animation 효과 글 참고)

 

 

-설치 : npm i react-fade

 

*fade in*

<Fade>

    <p>fade In</p>

</Fade>

 

*fade out*

import { default as React, Component } from 'react'
import { default as Fade } from 'react-fade'
 
const fadeDuration = 10
 
function FadeExample(){
	const [fadeOut, setfadeOut] = useState(false)
    const [visibility, setvisibility] = useState('visible')
  
 
	if (fadeOut) {
      setTimeout(() => {
      	setvisibility('hidden')
      }, fadeDuration)
    }
  
    return (
      <div>
        <Fade
          out={fadeOut}
          duration={fadeDuration}
          style={{
            visibility: {visibility}
          }}
        >
          <p>I am so faded</p>
        </Fade>
        
        <button onClick={() => setfadeOut(true)}>
          Fade out
        </button>
      </div>
    )
}

export default FadeExample

 

https://www.npmjs.com/package/react-fade