simpleLightBox
Carousel 같은 얘들이라 해야하남
공식 홈페이지
설치(CDN 도 가능) 및 import
# 4) 라이트박스 lib : simpleLightBox 설치
npm i simplelightbox
# 4-1) import SimpleLightbox from "simplelightbox" 설치
import SimpleLightbox from "simplelightbox";
# 4-2) simplelightbox css import : App.tsx
import "simplelightbox/dist/simple-lightbox.css";
만약 typescript 를 사용하다
이러한 것이 뜨면
현재 2023-10-30일 경으로 아직 simpleLightBox에는 typescript 타입이 없다
따라서
# 공통) 외부 lib 타입이 없을때 대처하는 방법
# 1) tsconfig.json 파일 - compilerOptions 속성에 아래 추가 : 프로젝트시작위치/types - 이 위치에 타입을 인식하게 하는 경로 설정
"typeRoots": ["./types", "./node_modules/@types"], // 보통 types 폴더를 만들어 타입 정의
# 2) types/외부라이브러리명/index.d.ts 파일 생성 후 아래 추가
declare module '외부라이브러리명';
< 외부 라이브러리 타입이 없을때 대처 방법 >
첫번째
node_modules/@types 폴더 생성
compilerOptions에 위의 글을 넣으면 자동 생성됩니다.
두번째
types/simplelightbox/index.d.ts 폴더,파일을 생성해줍니다.
외부라이브러리 simplelightbox 를 가져와 줍니다.
배포 폴더 확인
simpleLightBox 폴더의 dist 안의 배포 폴더들
App.tsx import
< 사용법 >
사용법
=> html :
<div className="부모선택자명">
<a href={이미지경로}/>
<img src={이미지경로}/>
</a>
...
</div>
=> js :
new SimpleLightbox('부모선택자 자식선택자(a태그)')
< 간단한 예제>
src/assets/initMain.ts
// initMain.ts
import SimpleLightbox from "simplelightbox";
export default function initMain() {
// TODO : simpleLightBox
new SimpleLightbox(".portfolio a ");
}
컴포넌트
// SimpleLightBoxCom.tsx
import React, { useEffect } from "react";
// TODO : 이미지 경로
import img01 from "../assets/img/portfolio/fullsize/1.jpg";
import img02 from "../assets/img/portfolio/fullsize/2.jpg";
import img03 from "../assets/img/portfolio/fullsize/3.jpg";
import img04 from "../assets/img/portfolio/fullsize/4.jpg";
import img05 from "../assets/img/portfolio/fullsize/5.jpg";
import img06 from "../assets/img/portfolio/fullsize/6.jpg";
import imgt01 from "../assets/img/portfolio/thumbnails/1.jpg";
import imgt02 from "../assets/img/portfolio/thumbnails/2.jpg";
import imgt03 from "../assets/img/portfolio/thumbnails/3.jpg";
import imgt04 from "../assets/img/portfolio/thumbnails/4.jpg";
import imgt05 from "../assets/img/portfolio/thumbnails/5.jpg";
import imgt06 from "../assets/img/portfolio/thumbnails/6.jpg";
import initMain from "../assets/js/initMain";
function SimpleLightBoxCom() {
useEffect(()=>{
initMain();
},[])
return (
<div>
<h1 className="align-center">Simple Lightbox Demo Page</h1>
<div className="row portfolio">
<a href={img01} className="col-4 ">
<img src={imgt01} />
</a>
<a href={img02} className="col-4 ">
<img src={imgt02} />
</a>
<a href={img03} className="col-4 ">
<img src={imgt03} />
</a>
<a href={img04} className="col-4 ">
<img src={imgt04} />
</a>
<a href={img05} className="col-4 ">
<img src={imgt05} />
</a>
<a href={img06} className="col-4 ">
<img src={imgt06} />
</a>
<div className="clear"></div>
</div>
</div>
);
}
export default SimpleLightBoxCom;
'React > React - 외부라이브러리' 카테고리의 다른 글
외부라이브러리 - Isotope (0) | 2023.10.30 |
---|---|
외부라이브러리 - owl-carousel (0) | 2023.10.30 |
외부라이브러리 - WOW (typescript) (0) | 2023.10.30 |
외부 라이브러리 - typed.js (0) | 2023.10.30 |
외부 라이브러리 - CounterUp (0) | 2023.10.30 |