React-list-ui NPM

React-List-UI

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

Type A

TypeAImage

Type B

TypeBImage

`smoothScroll=true`

smoothScroll

`focusOn=true && smoothScroll=true`

focusOn

`overScroll=true`

overScroll

`overScroll=false`

endPoint

How to Use

설치 방법
```
$ npm install react-list-ui --save
```

사용 방법

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;
}