【React Native】タグ入力欄を実装できる「react-native-tags-input」ライブラリ

タイトルにある通り、タグを入力できる入力欄を簡単に実装できるライブラリ「react-native-tags-input」のご紹介です。
入力したタグは、配列で管理できます。

ライブラリの GitHub はこちら。

GitHub – jimmybengtsson/react-native-tags-input: Input component for React Native to add and remove tags.
https://github.com/jimmybengtsson/react-native-tags-input

 

インストールには、下記のコマンドを実行してください。

npm install react-native-tags-input --save

下記、サンプルコードです。

import React, { useState } from 'react';
import TagInput from 'react-native-tags-input';

export default Sample = () => {
  const [tags, setTags] = useState({ tag: '', tagsArray: [] });
  const updateTagState = (tags) => {
    setState(tags);
  }
  return (
    <TagInput
      updateState={updateTagState}
      tags={tags} />
}

tagsupdateState は必須項目なので、必ず指定してください。
tags の tag には現在入力欄に入力されている文字が入り、tagsArray には、追加したタグが配列で格納されます。
基本的にはこれだけで動作しますが、placeholder を指定したり、入力欄のデザインを変更したり、追加したタグのデザインを変更したりすることもできます。
カスタマイズが色々できるので、追加したプロジェクトの見た目に合わせることもできました。

 

以上、React Native でタグ入力欄を実装できるライブラリ「react-native-tags-input」のご紹介でした。
上でも書きましたが、カスタマイズ性が良いので、シンプルなタグ入力欄を導入したい方にはおすすめです。

  •  この記事いいね! (0)
>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7 浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください。

CTR IMG