React.js ライブラリ「react-finderselect」を使ってファインダーセレクトを実装する

2021.02.08
React
React.js

ライブラリ「react-finderselect」をインストールすると、ファインダーセレクトを実装することが可能です。ここでは、react.jsでreact-autocomplete-inputを利用するための手順と簡単な使い方を記述してます。

1. 環境
2. react.js環境構築
3. react-finderselectインストール
4. react-finderselect使い方

環境

OS CentOS Stream release 8
node V12.16.3
npm 6.14.7
React 16.13.0

最新版のnode14とyarnをインストールする手順

react.js環境構築

下記のコマンドで構築してます。ここでは、react-appという名前でプロジェクトを作成してます。

create-react-app react-app

1	create-react-app react-app

react-finderselectインストール

作成したプロジェクトに移動して、インストールします。

## 作成したプロジェクトに移動
cd react-app
 
## インストール
npm install react-finderselect

## 作成したプロジェクトに移動

cd react-app

## インストール

npm install react-finderselect

react-finderselect使い方

srcディレクトリにsample.jsと名前で下記のコードを記述します。

import React from "react";

import FinderSelect from 'react-finderselect'
import 'react-finderselect/dist/index.css'

const data = [
  {
    name: 'Venezuela',
    capital: 'Caracas',
    code: 'VE'
  }, {
    name: 'Peru',
    capital: 'Lima',
    code: 'PE'
  }, {
    name: 'Argentina',
    capital: 'Buenos Aires',
    code: 'AR'
  },
]

const Sample = () => {


  return (
    <div>
      <FinderSelect
        data={data}
        label='name'
        value='code'
        extraInfo='capital'
        name='country'
        className='anyClass'
        placeholder='Select a country'
        onClick={() => console.log('entering')}
        onChange={() => console.log('leaving')}
      />
    </div>
  );
};

export default Sample;

import React from "react";

import FinderSelect from 'react-finderselect'

import 'react-finderselect/dist/index.css'

const data = [

{

capital: 'Caracas',

code: 'VE'

}, {

capital: 'Lima',

code: 'PE'

}, {

capital: 'Buenos Aires',

code: 'AR'

]

const Sample = () => {

return (

<div>

<FinderSelect

data={data}

label='name'

value='code'

extraInfo='capital'

name='country'

className='anyClass'

placeholder='Select a country'

onClick={() => console.log('entering')}

onChange={() => console.log('leaving')}

</div>

);

};

export default Sample;

次に、srcディレクトリ配下にあるApp.jsを下記のように編集します。

import React from 'react';
import Sample from './sample';
import './App.css';

function App() {
  const style = {
    width: "50%",
    margin: "0 auto",
    marginTop: 150,
  };
  return (
    <div className="App">
      <div style={style}>
        <Sample />
      </div>
    </div>
  );
}

export default App;