kasper-design

---

Use styled-components to build React-Components I will update this package continuously demo: GO

Recap

---

1. Install
2. Atom
   • ButtonWithRef
   • FileUploader
   • MinuteTimer
   • PopUpModel
   • ProcessBar
3. Molecule
   • CopyButton
4. Hook

---

Install

---

Install with npm:

npm install kasper-design

Install with yarn:

yarn add kasper-design

Atom

---

Components	Properties
ButtonWithRef	children?: React.ReactNode handlePress?: () => void handleUp?: () => void handleLeave?: () => void handleHover?: () => void handleClick?: () => void;
FileUploader
MinuteTimer	leftTime: string
PopUpModel	width?: number height?: number backgroundColor?: string left?: number top?: number
ProcessBar	width?: number stepSigns?: string[] descriptions?: string[] fontSize?: number stepSignSize?: number processingStepColor?: string notProcessedYetStepColor?: string currentProcessingStep?: number barHeight?: number

Molecule

---

Components	Properties
CopyButton	children?: React.ReactNode targetRef: React.MutableRefObject<any> buttonRef: React.MutableRefObject<HTMLButtonElement>

Hook

---

name	functionality
useWindowResize	listen to window resize
useDebounce	prevent too many request