react chat elementsダウンロード - react chat elementsソースコードのダウンロード

反応チャット要素

Reactjs チャット要素

注: このパッケージは、react-native をサポートしなくなりました。

完全なドキュメント、変更履歴

インストール

 npm install react-chat-elements --save

輸入品

 // RCE CSS
import 'react-chat-elements/dist/main.css'
// MessageBox component
import { MessageBox } from 'react-chat-elements'

コンポーネント

チャットアイテム
メッセージボックス
システムメッセージ
メッセージリスト
チャットリスト
入力
ボタン
ポップアップ
サイドバー
ナビバー
落ちる
アバター
位置メッセージ
Spotifyメッセージ
会議項目
会議リスト
ミーティングリンク

ChatItemコンポーネント

チャットアイテム写真

 import { ChatItem } from 'react-chat-elements'
; < ChatItem
  avatar = { 'https://facebook.github.io/react/img/logo.svg' }
  alt = { 'Reactjs' }
  title = { 'Facebook' }
  subtitle = { 'What are you doing?' }
  date = { new Date ( ) }
  unread = { 0 }
/>

ChatItemの小道具

小道具	デフォルト	タイプ	説明
アバター	なし	弦	ChatItem アバター写真の URL
アバター柔軟	間違い	ブール値	柔軟な ChatItem アバター写真
代替	なし	弦	ChatItem アバター写真の代替テキスト
タイトル	なし	弦	チャットアイテムのタイトル
字幕	なし	弦	ChatItem サブタイトル
日付	なし	日付	チャットアイテムの日付
日付文字列	なし	弦	ChatItem は dateString または timeagojs(now, date) を表します
未読	0	整数	ChatItemの未読数
オンクリック	なし	関数	クリック時の ChatItem
onContextMenu	なし	関数	コンテキストメニューの ChatItem
ステータスの色	なし	色	ChatItem ステータスの色
ステータスの色の種類	バッジ	弦	ChatItem ステータスの色の種類 (丸、バッジ)
ステータステキスト	なし	色	ChatItem ステータステキスト
画像の遅延読み込み	なし	画像パス	遅延読み込みイメージ
ミュートされた	間違い	ブール	チャットのミュート情報
表示ミュート	間違い	ブール	チャットのミュートボタンの表示設定
showビデオコール	間違い	ブール	チャットビデオ通話ボタンの可視性
onClickミュート	なし	関数	ミュートボタン
onClickビデオコール	なし	関数	ビデオ通話ボタン

メッセージボックスコンポーネント

ファイル	写真	文章	位置	ビデオ	オーディオ

 import { MessageBox } from 'react-chat-elements'
; < MessageBox
  position = { 'left' }
  type = { 'photo' }
  text = { 'react.svg' }
  data = { {
    uri : 'https://facebook.github.io/react/img/logo.svg' ,
    status : {
      click : false ,
      loading : 0 ,
    } ,
  } }
/>

メッセージボックスの小道具

小道具	デフォルト	タイプ	説明
ID	i (インデックス)	弦	メッセージボックスID
位置	左	弦	メッセージボックスの位置
タイプ	文章	弦	メッセージの種類 (テキスト、写真、ファイル、場所、Spotify、ビデオ、オーディオ)
文章	なし	弦	メッセージテキスト
タイトル	なし	弦	メッセージのタイトル
タイトル色	なし	文字列(色)	メッセージタイトルの色
データ	{}	物体	メッセージデータ
日付	新しい日付()	日付	メッセージの日付
日付文字列	なし	弦	メッセージは dateString または timeagojs(now, date) を表します
オンクリック	なし	関数	クリック時のメッセージ (メッセージ(オブジェクト)が返されます)
開く	なし	関数	オープン時のメッセージ（ファイルまたは写真）（メッセージ（オブジェクト）が返されます）
ダウンロード中	なし	関数	ダウンロード時のメッセージ（ファイルまたは写真）（メッセージ（オブジェクト）が返されます）
onLoad	なし	関数	写真読み込み時のメッセージ
onPhotoError	なし	関数	エラー写真のメッセージ
onタイトルクリック	なし	関数	クリックイベントのメッセージタイトル
進むクリック時	なし	関数	クリックイベントでメッセージを転送する
onReplyClick	なし	関数	クリックイベント時のメッセージ返信
会議メッセージクリック	なし	関数	クリックイベントの会議メッセージ
on会議タイトルクリック	なし	関数	クリックイベント時の会議タイトルメッセージ
onミーティングビデオリンククリック	なし	関数	クリックイベント時の会議ビデオリンクメッセージ
onReplyメッセージクリック	なし	関数	クリックイベント時の返信メッセージ
onRemoveMessageClick	なし	関数	クリックイベントでメッセージを削除
会議中もっと選択	なし	関数	メッセージリストアイテム onMeetingMoreSelect イベント、3 つのパラメーターを取得します: メッセージアイテム、アイテムのインデックス、イベント
会議リンククリックで	なし	関数	クリックイベントの会議リンク
onContextMenu	なし	関数	メッセージコンテキストメニューのクリックイベント
転送されました	なし	ブール値	メッセージ転送アイコン
返信ボタン	なし	ブール値	メッセージ返信アイコン
削除ボタン	なし	ブール値	メッセージ削除アイコン
状態	なし	弦	メッセージステータス情報 (待機中、送信済み、受信済み、既読)
ノッチ	真実	ブール値	メッセージボックスの切り欠き
アバター	なし	URL	メッセージボックスのアバターURL
レンダリング追加Cmp	なし	機能（コンポーネント）	メッセージボックスにカスタムコンポーネントを追加する
コピー可能な日付	間違い	ブール値	メッセージボックスの日付テキストをコピー可能
集中	間違い	ブール値	MessageList コンポーネントのメッセージフォーカス機能で使用され、コンポーネントのスタイルがフォーカスされます。
onメッセージ重視	なし	関数	メッセージがフォーカスになった後、フォーカス値を false にします
返事	なし	物体	返信データ
撤回された	なし	ブール値	メッセージが削除または撤回されました
転送されたメッセージテキスト	転送されました	弦	転送されたメッセージテキスト

応答メッセージコンポーネント

 import { MessageBox } from 'react-chat-elements'
; < MessageBox
  reply = { {
    photoURL : 'https://facebook.github.io/react/img/logo.svg' ,
    title : 'elit magna' ,
    titleColor : '#8717ae' ,
    message : 'Aliqua amet incididunt id nostrud' ,
  } }
  onReplyMessageClick = { ( ) => console . log ( 'reply clicked!' ) }
  position = { 'left' }
  type = { 'text' }
  text = { 'Tempor duis do voluptate enim duis velit veniam aute ullamco dolore duis irure.' }
/>

返信メッセージ

ミーティングメッセージコンポーネント

 import { MeetingMessage } from 'react-chat-elements'

< MeetingMessage
    subject = { 'New Release' }
    title = { 'in ullamco' }
    date = { new Date ( ) }
    collapseTitle = { 'Commodo aliquip' }
    participants = { [
        {
            id : '1' ,
            title : 'Facebook' ,
        } ,
        .
        .
        .
    ] }
    dataSource = { [
        {
            id : '1' ,
            avatar : 'https://facebook.github.io/react/img/logo.svg' ,
            message : 'Lorem ipsum dolor sit amet.' ,
            title : 'Elit magna' ,
            avatarFlexible : true ,
            date : new Date ( ) ,
            event : { [
                title : 'Toplantı sona erdi!' ,
                avatars = { [
                    src : 'https://facebook.github.io/react/img/logo.svg'
                ] }
            ] }
            record : { [
                avatar : 'https://facebook.github.io/react/img/logo.svg' ,
                title : 'Arama' ,
                savedBy : 'Kaydeden: Elit magna' ,
                time : new Date ( ) ,
            ] }
        } ,
        .
        .
        .
    ] } / >

ミーティングメッセージの小道具

小道具	デフォルト	タイプ	説明
主題	なし	弦	会議メッセージ
タイトル	なし	弦	会議のタイトル
日付	新しい日付()	日付	会議日
折りたたむタイトル	なし	弦	会議のサブタイトル
参加者	[]	配列	会議参加者の配列
もっと見るアイテム	なし	配列	さらにアイテムをメッセージする
データソース	[]	配列	会議リストの配列
オンクリック	なし	関数	クリックイベント時の会議メッセージ (メッセージ(オブジェクト)が返されます)
on会議タイトルクリック	なし	関数	クリックイベント時の会議タイトルメッセージ (メッセージ(オブジェクト)が返されます)
onミーティングビデオリンククリック	なし	関数	クリックイベント時の会議ビデオリンクメッセージ (メッセージ(オブジェクト)が返されます)
会議中もっと選択	なし	関数	メッセージリストアイテム onMeetingMoreSelect イベント、3 つのパラメーターを取得します: メッセージアイテム、アイテムのインデックス、イベント

MeetingLink コンポーネント

会議リンク-写真

 import { MeetingLink } from 'react-chat-elements'
; < MeetingLink meetingID = '1' title = 'Lorem ipsum dolor sit amet.' />

MeetingLink の小道具

小道具	デフォルト	タイプ	説明
会議ID	なし	弦	ミーティングリンクID
タイトル	なし	弦	会議リンクのタイトル
会議リンククリックで	なし	関数	クリックイベントの会議リンク

システムメッセージコンポーネント

 import { SystemMessage } from 'react-chat-elements'
; < SystemMessage text = { 'End of conversation' } />

SystemMessage の小道具

小道具	デフォルト	タイプ	説明
文章	なし	弦	メッセージテキスト

メッセージリストコンポーネント

メッセージリスト-写真

 import { MessageList } from 'react-chat-elements'
messageListReferance = React . createRef ( ) ;

< MessageList
	referance = { messageListReferance }
	className = 'message-list'
	lockable = { true }
	toBottomHeight = { '100%' }
	dataSource = { [
	    {
	        position : 'right' ,
	        type : 'text' ,
	        text : 'Lorem ipsum dolor sit amet, consectetur adipisicing elit' ,
	        date : new Date ( ) ,
	    } ,
	    .
	    .
	    .
	] } />

メッセージリストの小道具

小道具	デフォルト	タイプ	説明
参照	なし	物体	メッセージリスト参照
クラス名	なし	弦	オプションのメッセージリスト className
データソース	[]	配列	メッセージリスト配列
施錠可能	間違い	ブール値	dataSourceが変更されるとスクロール位置にロックされます
底部までの高さ	300	int または string('100%' のみ)	データソースが変更されたときに、toBottomHeight プロパティの値がスクロールバーの下部の値より大きい場合、スクロールバーはページの最後で下部に移動します。 toBottomHeight プロパティの値が'100%'に設定されている場合、データソースが変更されると、スクロールバーはページの最後で一番下に移動します。
オンクリック	なし	関数	メッセージリスト項目をクリックすると (メッセージ(オブジェクト)が返されます)
開く	なし	関数	オープン時のメッセージリストアイテム (ファイルまたは写真) (メッセージ(オブジェクト)が返されます)
onダウンロード	なし	関数	ダウンロード時のメッセージリストアイテム (ファイルまたは写真) (メッセージ(オブジェクト)が返されます)
オンスクロール	なし	関数	メッセージリスト onScroll イベント
進むクリック時	なし	関数	メッセージリスト項目 onForwardClick イベント
onReplyClick	なし	関数	メッセージリスト項目 onReplyClick イベント
onReplyメッセージクリック	なし	関数	メッセージリスト項目 onReplyMessageClick イベント
ダウンボタン	真実	ブール値	メッセージリストを一番下までスクロールボタン
ダウンボタンバッジ	なし	ブール値	メッセージリストダウンボタンバッジの内容
onDownボタンクリック	なし	関数	メッセージリスト onDownButtonClick
onContextMenu	なし	関数	メッセージリスト項目 onContextMenu イベント、3 つのパラメータを取得します: メッセージ項目、項目のインデックス、イベント
onPhotoError	なし	関数	エラー写真のメッセージリスト項目

チャットリストコンポーネント

チャットリスト-写真

 import { ChatList } from 'react-chat-elements'

< ChatList
    className = 'chat-list'
    dataSource = { [
        {
            avatar : 'https://facebook.github.io/react/img/logo.svg' ,
            alt : 'Reactjs' ,
            title : 'Facebook' ,
            subtitle : 'What are you doing?' ,
            date : new Date ( ) ,
            unread : 0 ,
        } ,
        .
        .
        .
    ] } />

チャットリストの小道具

小道具	デフォルト	タイプ	説明
クラス名	なし	弦	オプションのチャットリストクラス名
データソース	[]	配列	チャットリスト配列
オンクリック	なし	関数	クリックするとチャットリスト項目(チャット(オブジェクト)が返されます)
onContextMenu	なし	関数	コンテキストメニューのチャットリスト項目(チャット(オブジェクト)が返されます)
アバターエラー	なし	関数	エラーアバター画像のチャットリスト項目
画像の遅延読み込み	なし	画像パス	遅延読み込みイメージ

入力コンポーネント

 import { Input } from 'react-chat-elements'
inputReferance = React . createRef ( )
; < Input
  referance = { inputReferance }
  placeholder = 'Type here...'
  multiline = { true }
  value = { inputValue }
  rightButtons = { < Button color = 'white' backgroundColor = 'black' text = 'Send' /> }
/>

// Clear text, e.g.:

inputClear = ( ) => { }
// ...
; < Input clear = { clear => ( inputClear = clear ) } placeholder = 'Type here...' />
// ...
inputClear ( )

入力プロパティ

小道具	デフォルト	タイプ	説明
参照	なし	物体	入力参照
クラス名	なし	弦	オプションの入力クラス名
プレースホルダー	なし	弦	プレースホルダーテキストを入力
デフォルト値	なし	弦	デフォルト値を入力
onChange	なし	関数	input onChange関数
複数行	間違い	ブール	入力はテキストエリアです
自動高さ	真実	ブール	自動高さを入力
最小高さ	25	整数	最小高さを入力
最大高さ	200	整数	最大高さを入力
入力スタイル	なし	物体	inputStyle オブジェクト
左ボタン	なし	オブジェクト(コンポーネント)	左ボタンコンポーネント
右ボタン	なし	オブジェクト(コンポーネント)	右ボタンコンポーネント
参照	なし	関数	input または textarea ref
最大長	なし	整数	入力またはテキストエリアの最大長
onMaxLengthExceed	なし	関数	最大長を超えると呼び出される
オートフォーカス	間違い	ブール	入力オートフォーカス
価値	なし	弦	入力値

ボタンコンポーネント

 import { Button } from 'react-chat-elements'
; < Button text = { 'click me!' } />

ボタンの小道具

小道具	デフォルト	タイプ	説明
タイプ	なし	弦	ボタンタイプ（白抜き、透明）
無効	なし	弦	ボタンが無効になっていますか?
文章	なし	弦	ボタンのテキスト
ボタン参照	なし	関数	ボタン参照
タイトル	なし	弦	ボタンのタイトル

ポップアップコンポーネント

 import { Popup } from 'react-chat-elements'
; < Popup
  show = { this . state . show }
  header = 'Lorem ipsum dolor sit amet.'
  headerButtons = { [
    {
      type : 'transparent' ,
      color : 'black' ,
      text : 'close' ,
      onClick : ( ) => {
        this . setState ( { show : false } )
      } ,
    } ,
  ] }
  text = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem animi veniam voluptas eius!'
  footerButtons = { [
    {
      color : 'white' ,
      backgroundColor : '#ff5e3e' ,
      text : 'Vazgeç' ,
    } ,
    {
      color : 'white' ,
      backgroundColor : 'lightgreen' ,
      text : 'Tamam' ,
    } ,
  ] }
/>

ポップアップ小道具

小道具	デフォルト	タイプ	説明
見せる	間違い	ブール	ポップアップが表示される
ヘッダ	なし	弦	ポップアップタイトル（ヘッダー）メッセージ
ヘッダーボタン	なし	配列	ポップアップタイトル（ヘッダー）ボタン
文章	なし	弦	ポップアップコンテンツ (中央) メッセージ
色	#333	文字列（色）	ポップアップコンテンツメッセージの色
フッターボタン	なし	配列	ポップアップフッターボタン
レンダリングヘッダー	なし	機能（コンポーネント）	レンダリングヘッダー関数
レンダリングコンテンツ	なし	機能（コンポーネント）	コンテンツのレンダリング機能
レンダーフッター	なし	機能（コンポーネント）	フッター関数をレンダリングする

サイドバーコンポーネント

 import { SideBar } from 'react-chat-elements'
; < SideBar top = { < div > 'TOP' area </ div > } center = { < div > 'CENTER' area </ div > } bottom = { < div > 'BOTTOM' area </ div > } />

サイドバーの小道具

小道具	デフォルト	タイプ	説明
タイプ	ライト	弦	サイドバーのスタイルタイプ (例: ライト、ダーク)
トップ	なし	成分	サイドバー上部コンポーネント
中心	なし	成分	サイドバー中央コンポーネント
底	なし	成分	サイドバー下部コンポーネント

ナビゲーションバーコンポーネント

 import { Navbar } from 'react-chat-elements'
; < Navbar left = { < div > 'LEFT' area </ div > } center = { < div > 'CENTER' area </ div > } right = { < div > 'RIGHT' area </ div > } />

ナビゲーションバーの小道具

小道具	デフォルト	タイプ	説明
タイプ	ライト	弦	ナビゲーションバーのスタイルタイプ (例: ライト、ダーク)
左	なし	成分	ナビゲーションバーの左コンポーネント
中心	なし	成分	ナビゲーションバーセンターコンポーネント
右	なし	成分	ナビゲーションバーの右コンポーネント

ドロップダウンコンポーネント

 import { Dropdown } from 'react-chat-elements'
; < Dropdown
  buttonProps = { {
    text : 'Dropdown' ,
  } }
  items = { [
    {
      icon : {
        component : icon ,
        float : 'left' ,
        color : 'red' ,
        size : 22 ,
      } ,
      text : 'lorem' ,
    } ,
    {
      icon : {
        component : icon ,
        float : 'left' ,
        color : 'purple' ,
        size : 22 ,
      } ,
      text : 'ipsum' ,
    } ,
    {
      text : 'dolor' ,
    } ,
  ] }
/>

ドロップダウンの小道具

小道具	デフォルト	タイプ	説明
アニメーションの種類	なし	弦	フェードまたはデフォルト
アニメーション位置	北西	弦	アニメーション開始位置（北西、北東、南西、南東）
アイテム	なし	配列	ドロップダウン項目の配列
onSelect	なし	関数	選択時の項目
ボタン小道具	なし	物体	ボタンのプロパティ

アバターコンポーネント

 import { Avatar } from 'react-chat-elements'
; < Avatar src = { 'https://facebook.github.io/react/img/logo.svg' } alt = { 'logo' } size = 'large' type = 'circle flexible' />

アバターの小道具

小道具	デフォルト	タイプ	説明
送信元	なし	画像	画像ソース
代替	なし	弦	画像の代替説明
サイズ	デフォルト	弦	画像サイズ。デフォルト (25px)、xsmall(30px)、small(35px)、medium(40px)、large(45px)、xlarge (55px)
タイプ	デフォルト	弦	タイプ: デフォルト、円、丸め(境界線半径 5px)、フレキシブル
レターアイテム	なし	物体	アバターが文字になる
サイド要素	なし	成分	アバター側要素
onError	なし	成分	アバター画像エラー
画像の遅延読み込み	なし	画像パス	遅延読み込みイメージ

ロケーションメッセージコンポーネント

 import { LocationMessage } from 'react-chat-elements'
; < LocationMessage
  data = { {
    latitude : '37.773972' ,
    longitude : '-122.431297' ,
    // staticURL: '<optional>',
    // mapURL: '<optional>'
  } }
/>

位置メッセージの小道具

小道具	デフォルト	タイプ	説明
送信元	なし	画像	画像ソース
APIキー	なし	弦	Google静的マップAPIキー
ズーム	14	整数	Google 静的地図のズームレベル
マーカーの色	赤	弦	Google 静的マップのマーカーの色
データ	{}	物体	メッセージデータ
ターゲット	_空白	弦	タグターゲットプロップのイメージ
開く	なし	関数	開いた状態の画像

Spotifyメッセージコンポーネント

スポティファイ

 import { SpotifyMessage } from 'react-chat-elements'
; < SpotifyMessage theme = 'white' view = 'coverart' uri = { 'spotify:user:spotify:playlist:3rgsDhGHZxZ9sB9DQWQfuf' } />

Spotifyメッセージの小道具

小道具	デフォルト	タイプ	説明
ウリ	なし	ウリ	スポティファイウリ
テーマ	黒	弦	Spotifyのテーマカラー（黒または白）
ビュー	リスト	弦	Spotify ビューのタイプ (リストまたはカバーアート)
データ	{}	物体	メッセージデータ
幅	300	整数	Spotify の埋め込み幅
身長	380	整数	Spotify 埋め込みの高さ

MeetingItem コンポーネント

打ち合わせ写真

 import { MeetingItem } from 'react-chat-elements'
; < MeetingItem
  subject = { 'New Release!!!' }
  avatars = { [
    {
      src : 'https://facebook.github.io/react/img/logo.svg' ,
    } ,
  ] }
  onMeetingClick = { console . log }
  onShareClick = { console . log }
  onCloseClick = { console . log }
/>

MeetingItem の小道具

小道具	デフォルト	タイプ	説明
主題	なし	弦	ミーティングアイテムの件名
件名制限	60	整数	MeetingItem 件名のテキスト制限
日付	なし	日付	会議アイテムの日付
日付文字列	なし	弦	MeetingItem は dateString または timeagojs(now, date) を表します
画像の遅延読み込み	なし	画像パス	遅延読み込みイメージ
開閉可能	真実	ブール値	MeetingItem クローズ可能
オンクリック	なし	関数	クリック時の会議項目
会議クリック時	なし	関数	会議クリック時の MeetingItem
オンシェアクリック	なし	関数	共有クリック時の MeetingItem
閉じるクリック時	なし	関数	閉じるクリック時の MeetingItem
アバター	なし	日付	ミーティングアイテムのアバター
アバター制限	5	日付	MeetingItem アバターの制限
オーディオミュート済み	真実	ブール値	MeetingItem の音声がミュートされました
オーディオソース	ヌル	弦	MeetingItem オーディオソース

ミーティングリストコンポーネント

会議リスト-写真

会議クローズ可能

 import { MeetingList } from 'react-chat-elements'

< MeetingList
    className = 'meeting-list'
    dataSource = { [
        {
            id : '1' ,
            subject : 'New Release' ,
            date : new Date ( ) ,
            avatars : [ {
               src : 'https://facebook.github.io/react/img/logo.svg' ,
            } ]
        } ,
        .
        .
        .
    ] } />

ミーティングリストの小道具

小道具	デフォルト	タイプ	説明
クラス名	なし	弦	オプションの会議リストのクラス名
データソース	[]	配列	会議リストの配列
オンクリック	なし	関数	クリックすると会議リスト項目 (meeting(object) が返されます)
会議クリック時	なし	関数	会議クリック時の会議リスト項目 (meeting(object) が返されます)
オンシェアクリック	なし	関数	共有クリック時の会議リスト項目 (meeting(object) が返されます)
閉じるクリック時	なし	関数	閉じるクリック時の会議リスト項目 (meeting(object) が返されます)
onContextMenu	なし	関数	コンテキストメニューの会議リスト項目 (meeting(object) が返されます)
アバターエラー	なし	関数	エラーアバター画像の会議リスト項目
画像の遅延読み込み	なし	画像パス	遅延読み込みイメージ

拡大する