react-countup 客製化樣式

 最近遇到專案有需要用到, react-countup的需求

記錄一下 @@

通常後端只會回你一個值

那如果要客製化數字, 或加入動畫

就會有點難處理...(如果後端願意吐陣列給你就不用那麼麻煩了 =. =)

解決方法是~

I: 先取得 api 回傳的值

2: split(), 把它拆分

3: 再餵入陣列內

不囉唆直接來代碼

bonus 是 api獲取的值

const getKey = bonus.split('')

const counts = [

{ key: 0, end: getKey[0], Count: 'count-box count-box1' },

{ key: 1, end: getKey[1], Count: 'count-box count-box2' },

{ key: 2, end: getKey[2], Count: 'count-box count-box3' },

{ key: 3, end: getKey[3], Count: 'count-box count-box4' },

{ key: 4, end: getKey[4], Count: 'count-box count-box5' },

{ key: 5, end: getKey[5], Count: 'count-box count-box6' },

{ key: 6, end: getKey[6], Count: 'count-box count-box7' },

{ key: 7, end: getKey[7], Count: 'count-box count-box8' },

{ key: 8, end: getKey[8], Count: 'count-box count-box9' },

{ key: 9, end: getKey[9], Count: 'count-box count-box10' },

{ key: 10, end: getKey[10], Count: 'count-box count-box11' },

]

return 出來

{counts.map(({ key, end, Count }) => <CountUp

start={0}

end={Number(end)}

duration={1}

separator=" "

decimals={0}

key={key}

>

{({ countUpRef }) => (

<div className={Count} >

<div className='count-box-hidden'>

<span ref={countUpRef} />

</div>

</div>

)}

</CountUp>)}

最後出來的效果圖(也可以自己加動畫進去, 我是有自己又加了動畫 =. =)