0.3.9 • Published 2 months ago
roulette-img v0.3.9
roulette-img 사용 가이드 🧚♀️
필요소스
- 룰렛 이미지 (확장자: png)
- 핀 이미지
이미지 준비
- 룰렛 이미지 이름은 이미지이름-이미지번호.png ex) rouletteImg-2.png , 여기서 이미지 번호는 룰렛의 칸 수를 나타냄.
- 이미지 모양
- 핀 이미지 예시 이미지 입니다.
설치 및 임포트
npm i roulette-img
import { Roulette } from "roulette-img";
사용법
//필요한 데이터 정리
export interface Roulette {
imgUrl: string; //필수값
arrowImgUrl: string; //필수값
chunkRange: ChunkRange; //필수값
chunk?: number;
arrowPosition?: Arrow;
winNumber?: winNumber;
buttonText?: string;
buttonShape?: ButtonShape;
buttonStyle?: React.ReactNode; // 태그를 리턴값으로 보내 버튼을 커스터마이징 할 수 있습니다
onWin?: (winNumber: number | null) => void;
}
//필요한 고정 컴포넌트 입니다
<Roulette
imgUrl="/assets/bg_circle-" //번호와 확장자를 제외한 "-"까지 적어주세요
arrowImgUrl="/assets/arrow.png"
chunkRange={{ start: 2, end: 6 }} //준비한 룰렛 이미지의 최소 칸과 최대 칸을 적어주세요
></Roulette>
//선택 컴포넌트 입니다
<Roulette
imgUrl="/assets/bg_circle-" //번호와 확장자를 제외한 "-"까지 적어주세요
arrowImgUrl="/assets/arrow.png"
chunkRange={{ start: 2, end: 6 }} //준비한 룰렛 이미지의 최소 칸과 최대 칸을 적어주세요
chunk = 3 //룰렛의 칸 | 기본값:chunkRange.start | [chunkRange의" 범위]
arrowPosition = "up" //핀의 위치 | 기본값 :"up" | ["up","down","left","right]
winNumber //당첨 번호 | 기본값: 랜덤 | [chunkRange의" 범위]
buttonText = "start" //버튼텍스트 | 기본값: start
buttonShape = "round" //버튼 모양 | 기본값: round | [round,squre]
></Roulette>
설정에 따른 모양
<Roulette
imgUrl="/assets/bg_circle-"
arrowImgUrl="/assets/arrow.png"
chunkRange={{ start: 2, end: 6 }}
chunk = 2
arrowPosition = "up" //핀의 위치 | 기본값 :"up" | ["up","down","left","right]
buttonText = "start" //버튼텍스트 | 기본값: start
buttonShape = "round" //버튼 모양 | 기본값: round | [round,squre]
></Roulette>
<Roulette
imgUrl="/assets/bg_circle-"
arrowImgUrl="/assets/arrow.png"
chunkRange={{ start: 2, end: 6 }}
chunk = 4
arrowPosition = "left" //핀의 위치 | 기본값 :"up" | ["up","down","left","right]
winNumber={{number:4,option:"none"}} //당첨 번호 | 기본값: 랜덤 | [chunkRange의" 범위]
buttonText = "start" //버튼텍스트 | 기본값: start
buttonShape = "square" //버튼 모양 | 기본값: round | [round,squre]
></Roulette>
스타일링 변경
룰렛 이미지 - .roulette 핀 이미지 - .arrow 스타트 버튼 - .start-button
.start-button {
color: yellow;
background-color: red;
}
version 0.3.0 추가 기능
- 당첨 번호 콜백 함수
const [winNumber, setWinNumber] = useState(0);
const getWinNumber = (number: number) => {
setWinNumber(number);
};
<Roulette
imgUrl="/assets/bg_circle-"
arrowImgUrl="/assets/arrow.png"
chunkRange={{ start: 2, end: 6 }}
onWin={getWinNumber}
></Roulette>;
- 위와 같은 방법으로 당첨 번호를 컨트롤할 수 있습니다.
- 버튼 커스텀 기능
<Roulette
imgUrl="/assets/bg_circle-"
arrowImgUrl="/assets/arrow.png"
chunkRange={{ start: 2, end: 6 }}
buttonStyle={
<>
<button>hello</button>
</>
}
></Roulette>
- 위와 같은 방법으로 고정 버튼이 아닌 직접 버튼을 커스텀 할 수 있습니다.
- 우선순위 buttonText,buttonShape < button.style
version 0.3.2 추가 기능
당첨번호를 외부 api에서 받아온 후 넘길수 있습니다.
//타입이 변경되었습니다.
export interface Roulette {
...
winNumber?: number | null;
drivingType?: winNumberOption;
...
}
export type winNumberOption = "async" | undefined;
//async옵션은 외부 api에서 당첨번호를 받아와 사용할때 - buttonStyle옵션을 사용해 커스터마이징 버튼을 만든후 직접 api와 연결해주세요
const [winNumber, setWinNumber] = useState<number | null>(null);
const clickButton = () => {
setWinNumber(null); // null로 초기화를 하면 버튼을 누를때마다 룰렛 돌아감 아닐시 한번만 돌아감
setTimeout(() => {
setWinNumber(2);
}, 3000);
};
return (
<div className="App">
//외부 API에서 당첨값을 받아 보낼때
<Roulette
imgUrl="/assets/bg_circle-"
arrowImgUrl="/assets/arrow.png"
chunkRange={{ start: 2, end: 6 }}
winNumber={winNumber}
drivingType="async"
buttonStyle={
<>
<button onClick={clickButton}>hello</button>
</>
}
></Roulette>
//직접 값을 선언
<Roulette
imgUrl="/assets/bg_circle-"
arrowImgUrl="/assets/arrow.png"
chunkRange={{ start: 2, end: 6 }}
winNumber={2}
chunk={4}
arrowPosition="left"
buttonShape="squre"
></Roulette>
//랜덤값
<Roulette
imgUrl="/assets/bg_circle-"
arrowImgUrl="/assets/arrow.png"
chunkRange={{ start: 2, end: 6 }}
chunk={6}
arrowPosition="right"
></Roulette>
);
0.3.9
2 months ago
0.3.8
2 months ago
0.3.6
2 months ago
0.3.5
2 months ago
0.3.7
2 months ago
0.3.4
2 months ago
0.3.3
4 months ago
0.3.2
4 months ago
0.3.0
4 months ago
0.3.1
4 months ago
0.2.0
4 months ago
0.1.19
4 months ago
0.1.18
4 months ago
0.1.17
4 months ago
0.1.16
4 months ago
0.1.15
4 months ago
0.0.15
4 months ago
0.0.14
4 months ago
0.0.13
4 months ago
0.0.12
4 months ago
0.0.11
4 months ago
0.0.10
4 months ago
0.0.9
4 months ago
0.0.8
4 months ago
0.0.7
4 months ago
0.0.6
4 months ago
0.0.5
4 months ago
0.0.4
4 months ago
0.0.3
4 months ago
0.0.2
4 months ago
0.0.1
4 months ago