UI를 찾아보기 모드로 표시

UI를 탐색 모드로 표시하는 React 구성 요소

앱을 만들고 나서 화면을 예쁘게 찍을 수 있는 방법을 고민하다 보니 브라우저 태그의 외관 프레임을 React 구성 요소로 만들어 봤습니다!
NPM으로 간편하게 설치할 수 있습니다.

npm i react-mockup

GiitHub 링크
https://github.com/501A-Designs/react-mockup
NPM 링크
https://www.npmjs.com/package/react-mockup

사용법

브라우저 모듈은 다음과 같이 추가할 수 있습니다.

      <BrowserMockup
        src=""
        type=""
        angleX=""
        angleY=""
        shadow=""
        border=""
        color=""
      />

등록 정보
무엇
ｓｒｃ
프로그램 캡처와 이미지 추가
type
외관의 종류(지금은'mac'와'outline'두 종류에만 대응,)
angleX
이동하는 X 각도
angleY
이동하는 Y 각도
shadow
불명확성 확인box-shadow(필요하지 않을 경우 none 입력)
border
불명확성 확인border(필요하지 않을 경우 none 입력)
color
탐색 모드의 머리 색상
사용 예:

      <BrowserMockup
        src="myrandomimage.png"
        type="mac"
        border="none"
        color="black"
      />

실제 제작에 앞서 제작된'DEIZU'시간표의 사이트 소개 페이지에서도 사용할 수 있다.
https://deizu.vercel.app/
이동모형<MobileMockup/>도 있지만 마음에 들지 않아 조회모형과 같이 맞춤형type과color의 속성이 없음을 양해해 주십시오.
앞으로도 브라우저 모델의 종류는 계속 확대될 것이다(Windows 아이콘 추가 등)!