프론트엔드✏️/코드캠프

antd 라이브러리, 리액트 플레이어 사용하기

당근먹는하니 2022. 5. 23. 17:42
728x90
반응형

사용하려는 폴더 터미널에

yarn add antd

npm install --save @ant-design/icons

 

 

__app.tsx 또는 쓰려는 페이지에서

import "antd/dist/antd.css";

 

 

쓰려는 페이지에서

// import React from 'react'; // next.js를 쓰기 때문에 생략함
import { Rate } from 'antd';
import { HeartOutlined } from '@ant-design/icons';

 

 

HTML 쓰는 부분에 복사/붙여넣기

<Rate character={<HeartOutlined />} allowHalf />
    <br />
    <Rate character="A" allowHalf style={{ fontSize: 36 }} />
    <br />
    <Rate character="好" allowHalf />

 

 

뭔가 이상한데 되긴 된다

🤓

 


 

유튜브 영상 넣기

yarn add react-player
import ReactPlayer from "react-player";
<ReactPlayer
        url="https://youtu.be/rkZ6gzyg7yY"
        width={800}
        height={600}
        playing={true}
        muted={true}
      />
728x90
반응형