[ReactJS] React Widgets

npm install react-widgets --save

React Widgets

개인 프로젝트를 하다가 사용한 라이브러리 React Widgets.

정말 귀찮은 인풋들을 처리할 수 있게 해준다.

이 네 가지 + Listbox를 사용할 수 있다.

NumberPicker

우선 내가 사용한 NumberPicker. 필요없는 코드들은 생략했다.

import NumberPicker from "react-widgets/NumberPicker";

function App() {
  const valueHandler = (key, value) => {
    console.log(key);
    console.log(value);
  }
  return (
    <>
    {selected.map((key) => (
      <>
        <NumberPicker 
        defaultValue={1}
        max={5} min={1}
        onChange={value => valueHandler(key, value)}/>;
      </>
    ))}
    </>
  );
}

export default App;

사용할 수 있는 props가 여러 가지 있는데,
위에서는 default 값, max, min을 사용했다.
step은 단위(ex. 10씩 증가)를 설정할 수 있다.
실수도 입력할 수 있고, format={{ style: 'percent' }}이라고 작성하면 0.2->20%와 같이 출력한다.

DropdownList/Multiselect