React一些常用的套件(前端特效_路由切換)

 

1. react-particle-animation(MIT 授權)

https://www.npmjs.com/package/react-particle-animation

Particle效果

套用後效果

簡單使用方式

Step1.引入組件

import ParticleAnimation from 'react-particle-animation';

Step2.使用ParticleAnimation 組件Tag設置相應屬性

function App() {
  return (
    <div className="App">
      <ParticleAnimation
        style={{ height: '96vh' }}
        background={{ r: 21, g: 22, b: 23, a: 1 }}
        particleSpeed={0.5}
        particleRadius={1.5}

      />
    </div>
  );
}

export default App;

2. react-typed(MIT 授權)

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

文字輸入動畫效果

簡單使用方式

Step1.引入組件

import Typed from 'react-typed';

Step2.使用Typed組件設置相應屬性進行要顯示的輸入動畫文字內容跟顯示、移除速度，是否重複

function Header() {
    return (
        <div className="main-info">
            <h1>Who Am I?</h1>
            <Typed
                strings={[
                    "",
                    "A software engineer",
                    "Also known as an",
                    "back-end developer",
                    "expert in .net webform, .net mvc, .net core",
                    "know a little front-end framework(react,vue,angular)",
                    "",
                    ""
                ]}
                typeSpeed={60}
                backSpeed={85}
                loop
            />
        </div>
    )
}

export default Header

3. react-router-dom(MIT 授權)

https://www.npmjs.com/package/react-router-dom

路由設置跳轉功能時候用的到

簡單使用方式

Step1.引入組件

Step2.使用BrowserRouter搭配Switch做路由切換

import React, { Component } from 'react';
import {BrowserRouter,HashRouter,Switch,Route} from 'react-router-dom';
import Login from './screens/Login/Login';
import Admin from './screens/Admin/Admin';

export default class App extends Component {
  render() {
    return (
      <BrowserRouter>
      <Switch>
        <Route path='/login' component={Login}></Route>
        <Route path='/admin' component={Admin}></Route>
      </Switch>
      </BrowserRouter>
    )
  }
}




效果