gyeol1212/React-List-UI

React-List-UI

React-List-UI 는 빅스크린에서 키보드 입력을 통해 List UI를 선택적으로 동작할 수 있는 컴포넌트 입니다.

Type A

Type B

smoothScroll=true

focusOn=true && smoothScroll=true

overScroll=true

overScroll=false

---

How to Use

1. 설치 방법

   $ npm install react-list-ui --save

2. 사용 방법

   import React from 'react';
   import ListUI from 'react-list-ui';
   
   const App = () => {
     return (
       <div className='App'>
         <ListUI />
       </div>
     );
   };
   
   export default App;

---

DEMO

다양한 props를 직접 넣으면서 Test해보세요

---

Props

Props	Description	Type	Default	Example
type	[필수] List의 A,B타입을 선택합니다.	[ 'A' , 'B' ]		type={ 'B' }
공통	type에 관계 없이 사용 가능한 props입니다
itemList	List 내부에 들어갈 item들을 입력합니다. 각 Object의 key:value는 자동으로 itemComponent의 props로 전달 됩니다.	arrayOf(Object))	[]	itemList={[{ title: 'first', content : 'first item' }, { title : 'second', content : 'second item' }]}
itemComponent	List 내부 item의 React Element를 전달합니다.	React.Element	<DefaultItemComponent />	itemComponent={<YourCustomComponent />}
clickDisable	마우스 클릭을 통한 선택 영역 이동 허용 여부를 결정합니다.	bool	false	clickDisable={ true }
smoothScroll	부드러운 스크롤 이동 여부를 결정합니다.	bool	true	smoothScroll={ false }
overScroll	범위를 벗어나는 스크롤일 경우, 처음으로 돌아갈지 여부를 결정합니다. False로 설정할 경우, 스크롤 영역이 흔들려 endPoint임을 알려줍니다.	bool	false	overScroll={ true }
focusOn	선택 영역을 배경색 대신 확대 여부로 강조할 지 결정합니다.	bool	false	focusOn={ true }
showResetButton	Reset Button 표시 여부를 결정합니다.	bool	false	showResetButton={ true }
Type A	props.type === 'A' 의 경우 사용 가능한 props들입니다.
itemStyle	Carousel 내부의 item들의 사이즈를 지정합니다. Height와 Width를 지정할 수 있습니다.	Object({ height: string, width: string })	{{ height: '18rem', width: '18rem' }}	itemStyle={{ height: '300px', width: '300px' }}
Type B	props.type === 'B' 의 경우 사용 가능한 props들입니다.
itemStyle	List 내부의 item들의 사이즈를 지정합니다. Height를 지정할 수 있습니다.	Object({ height: string })	{{ height: '18rem' }}	itemStyle={{ height: '300px' }}
col	List column의 item 개수를 지정합니다.	number	4	col={ 5 }

Css Customizing props

CSS를 Customizing하기 위한 Props들 입니다.

Props	Description	type
containerCssObject	container Css를 변경합니다.	Object
listCssObject	list Css를 변경합니다.	Object
itemCssObject	item Css를 변경합니다.	Object
selectingAreaCssObject	selectingArea Css를 변경합니다.	Object
headerCssObject	header Css를 변경합니다.	Object
resetButtonCssObject	resetButton Css를 변경합니다.	Object

// CSS customizing props example
<ListUI containerCssObject={{ backgroundColor: 'red' }} />

Customizing한 ClassName을 추가할 수 있습니다.

Props	Description	type
containerClassName	container에 ClassName을 추가합니다.	String
listClassName	list에 ClassName을 추가합니다.	String
itemClassName	item에 ClassName을 추가합니다.	String
selectingAreaClassName	selectingArea에 ClassName을 추가합니다.	String
headerClassName	header에 ClassName을 추가합니다.	String
resetButtonClassName	resetButton에 ClassName을 추가합니다.	String

이 Component는 styled-component를 사용하고 있습니다. className을 이용하여 styled-component보다 우선해 적용하고 싶다면 아래와 같이 사용하세요.

// Add class props example


// app.js
<ListUI containerClassName='customClassName' />


// app.css
.customClassName.customClassName {
  background-color: red;
}

이 Component의 구조는 아래 이미지를 참고하세요.

---