0.0.22 β’ Published 2 years ago
react-holiday-time-bar v0.0.22
react-holiday-time-bar ποΈ
Introduction
μλ νμΈμ! ν΄κ°(λ°μ°¨, λ°λ°μ°¨) μκ° μ ν λ° λ¦¬μ‘νΈ μ»΄ν¬λνΈμ λλ€. π β°
Get Started
npm i react-holiday-time-bar
or
yarn add react-holiday-time-bar
Type
μ¬κΈ°μλ λ€μκ³Ό κ°μ νμμ μ¬μ©ν©λλ€.
interface TimeValue {
hour: number;
minute: number;
}
type TimeCellMode = 'none' | 'lunch' | 'holi' | 'work';
interface TimeCellValue {
mode: TimeCellMode;
hoverMode: TimeCellMode;
}
Usage
- 컀μ μμΉλ νμ ν΄κ° μμ μκ°μ κ°λ¦¬ν΅λλ€.
- λ§μ°μ€λ₯Ό μ¬λ €λ¨μ λ ν λ리 λ³νλ‘ ν΄κ° μκ°κ³Ό 근무 μκ°μ 미리볼 μ μμ΅λλ€.
- ν΄λ¦νλ©΄ λ°°κ²½μ΄ μΉ ν΄μ§λ©°, μΆν΄κ·Ό μκ° λ° ν΄κ° μμ/μ’ λ£ μκ°μ΄ λ΄κΈ΄ μνλ₯Ό λ°νν©λλ€.
duration
: 2(λ°λ°μ°¨) | 4(λ°μ°¨) | 8
import React from 'react';
import { HolidayTimeBar } from 'react-holiday-time-bar';
const App = () => {
return (
<div id='App'>
<HolidayTimeBar duration={2} />
</div>
);
};
export default App;
Constant
- μΌνλ μκ°: 9μκ° (μ μ¬ μκ° ν¬ν¨)
- μ μ¬ μκ°: 11:30 ~ 13:00
- μ΅μ μκ°: 07:00
- μ΅λ μκ°: 19:00
Customize
useState
times
,setTimes
λ₯Ό propsλ‘ λ겨주면 λ§μ°μ€ ν΄λ¦ μλ§λ€times
μ μλ ννμ λ°μ΄ν°κ° μ μ₯λ©λλ€.{ startWorkTime, endWorkTime, startHoliTime, endHoliTime }
import React, { useState } from 'react';
import { HolidayTimeBar } from 'react-holiday-time-bar';
const App = () => {
const [times, setTimes] = useState<any>({}); // { startWorkTime, endWorkTime, startHoliTime, endHoliTime }
console.log(times.startWorkTime); // { hour: 9, minute: 15 }
return (
<div id='App'>
<GlobalStyles />
<HolidayTimeBar
duration={2}
times={times}
setTimes={setTimes}
/>
</div>
);
};
export default App;
viewText
viewText={true}
λ λ΄κ° μ νν μκ°μ 보μ¬μ€λλ€.- μνλ₯Ό λκ²¨μ£Όμ§ μμΌλ©΄ μ체 λ΄μ₯λ μνλ‘ μ§νν©λλ€.
import React from 'react';
import { HolidayTimeBar } from 'react-holiday-time-bar';
const App = () => {
return (
<div id='App'>
<HolidayTimeBar
duration={2}
viewText={true}
/>
</div>
);
};
export default App;
Color
- propsλ‘ μκΉμ μ§μ ν μ μμ΅λλ€.
import React from 'react';
import { HolidayTimeBar } from 'react-holiday-time-bar';
const App = () => {
return (
<div id='App'>
<GlobalStyles />
<HolidayTimeBar
duration={2}
holiColor='#FDB0B3'
holiHoverColor='#F15B6D'
workColor='#C0FCF8'
workHoverColor='#5ABAB6'
lunchColor='#E7FBBE'
/>
</div>
);
};
export default App;
className
- κ·Έ λ°μ 컀μ€ν
cssλ₯Ό μ
νκ³ μΆλ€λ©΄,
className
μ λΆμ¬ν μ μμ΅λλ€.cellClassName
: μ ν κ°μ λ€μ΄κ°className
μ λλ€.
import React from 'react';
import { HolidayTimeBar } from 'react-holiday-time-bar';
const App = () => {
return (
<div id='App'>
<GlobalStyles />
<HolidayTimeBar
duration={2}
className='custom-class'
cellClassName='custom-cell-class'
/>
</div>
);
};
export default App;