[筆記] 哎呀！不小心刻了一套 React UI 元件庫 2

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Switch 開關元件的重點。

[ Repo ]：https://github.com/andy922200/practice-storybook-react

Switch 元件

Switch 在觸發時，狀態就會改變，而 Checkbox 則會需要送出後才會生效
屬性
1. checked：布林值，決定按鈕的開關狀態
2. 事件屬性：看改寫的原生元素為何。若是用 checkbox 則是 onChange；button 則是 onClick
3. disabled：布林值，禁用。視情況可以在上頭補上 loading 的狀態
4. 顏色
5. 開啟狀態的文字
6. 關閉狀態的文字
Thumb 是指圓圓的 Icon，Label
當 isDisabled 有變化時，就需要重新計算開關內的 Label 長度，因此會需要 useLayoutEffect
使用 useLayoutEffect 的原因是： labelRef?.current?.clientWidth 的值是在「畫面進行 Repaint 」前執行。若使用 useEffect 會導致縱使 clientWidth 的長度不正確，一樣進行渲染後再調整。換言之，你會有過多無謂的渲染結果。 https://www.explainthis.io/zh-hant/swe/use-effect-vs-use-layout-effect
isDisabled 時，cursor 需要變化，且會調整顏色或是透明度來讓使用者知道狀態已經改變了

程式碼

https://github.com/andy922200/practice-storybook-react/commit/76e23d7d7b27267751febe52cfb3119e5d3f30d2

★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 10 – Chip/Tag

在製作 Chip ( 也可稱為 Tag ) 的過程中，關於標籤 Label 的傳入，我想保留 children 或是 label 參數都可以。另外當 isDisabled 是 true 的時候，樣式會變化且不會觸發刪除函式[ Repo ]：https://github.com/andy922200/

★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 9 – Upload

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Upload。[ Repo ]：https://github.com/andy922200/practice-storybook-react內容原生的 html 元件 <inp

★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 8 – Rate

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Rate。[ Repo ]：https://github.com/andy922200/practice-storybook-react內容為了要做出「預覽」和

★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 7 – Slider

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Slider。[ Repo ]：https://github.com/andy922200/practice-storybook-react內容Slider 上頭的拖拉圓形

★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 6 – Form Control

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Form Control 這個表格顯示常見的共用樣式的重點。[ Repo ]：https://github.com/andy922200/prac

★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 5 – Input

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下純輸入元件 Input 的重點。[ Repo ]：https://github.com/andy922200/practice-storybook-react內容若

★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 4 – Checkbox

此篇接續上篇 [筆記] 哎呀！不小心刻了一套 React UI 元件庫 3 – Radio，來刻 Checkbox。[ Repo ]：https://github.com/andy922200/practice-storybook-react內容Checkbox 跟 Radio 的行為相似，但 Radio 多以圓形表示單選，而 Che

★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 3 – Radio

Radio 和 Checkbox 的選項部分是類似的，差別在於前者需要有群組處理單選，後者每一個都可以是獨立狀態。此篇先由 Radio 和 RadioGroup 開始。[ Repo ]：https://github.com/andy922200/practice-storybook-react內容Option

★全文分享★ [筆記] 哎呀！不小心刻了一套 React UI 元件庫 1 – 開發環境和 Button

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Button 按鈕元件的重點，並筆記下開發環境架設所需。開發環境書中原先是採用 js

按讚加入粉絲團

[筆記] 哎呀！不小心刻了一套 React UI 元件庫 2 – Switch