react-grid-layout

ui-component grid layout

React-grid-layout은 React에 대한 드래그 가능하고 크기 조정이 가능한 그리드 레이아웃 라이브러리입니다. 반응형 브레이크포인트를 지원하여 다양한 화면 크기에 맞게 콘텐츠를 적절히 조절할 수 있습니다.

Latest Ver 1.5.1

Homepage

Github

21,161

📢 React-grid-layout은 사용자가 드래그하고 크기를 조정할 수 있는 반응형 그리드 레이아웃을 제공합니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.5.1/react-grid-layout.min.js

https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.5.1/css/styles.css

https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.5.1/css/styles.min.css

https://cdnjs.cloudflare.com/ajax/libs/react-grid-layout/1.5.1/react-grid-layout.min.js.map

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

⚙️ JavaScript
{\"code\": \"import GridLayout from 'react-grid-layout';\nconst MyFirstGrid = () => {\n return (\n <GridLayout className='layout' cols={12} rowHeight={30} width={1200}>\n <div key='1'>Block 1</div>\n <div key='2'>Block 2</div>\n <div key='3'>Block 3</div>\n <div key='4'>Block 4</div>\n </GridLayout>\n );\n};\"}