Descarga react chat elements - react chat elements Descarga de código fuente

reaccionar-chat-elementos

Elementos de chat de Reactjs

NOTA: este paquete ya no admite reaccionar-nativo.

Documentación completa , registro de cambios

Instalar

 npm install react-chat-elements --save

Importaciones

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

Componentes

Artículo de chat
Cuadro de mensaje
Mensaje del sistema
Lista de mensajes
Lista de chat
Aporte
Botón
ventana emergente
Barra lateral
Barra de navegación
Menú desplegable
Avatar
UbicaciónMensaje
SpotifyMensaje
Artículo de reunión
Lista de reuniones
Enlace de reunión

Componente ChatItem

chatitem-foto

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

Accesorios de elementos de chat

apuntalar	por defecto	tipo	descripción
avatar	ninguno	cadena	URL de la foto del avatar de ChatItem
avatarFlexible	FALSO	booleano	Foto de avatar de ChatItem flexible
alternativo	ninguno	cadena	Texto alternativo de la foto del avatar de ChatItem
título	ninguno	cadena	Título del elemento de chat
subtitular	ninguno	cadena	Subtítulo del elemento de chat
fecha	ninguno	fecha	Fecha del elemento de chat
cadena de fecha	ninguno	cadena	ChatItem representa dateString o timeagojs (ahora, fecha)
no leído	0	entero	Recuento de elementos de chat no leídos
al hacer clic	ninguno	función	ChatItem al hacer clic
en el menú contextual	ninguno	función	ChatItem en el menú contextual
estadoColor	ninguno	color	Color de estado del elemento de chat
estadoColorTipo	insignia	cadena	Tipo de color de estado de ChatItem (círculo, insignia)
estadoTexto	ninguno	color	Texto de estado del elemento de chat
perezosoCargandoImagen	ninguno	ruta de la imagen	imagen de carga diferida
apagado	FALSO	booleano	chat silenciar información
mostrar silencio	FALSO	booleano	Visibilidad del botón de silencio del chat.
mostrarVideoLlamada	FALSO	booleano	visibilidad del botón de videollamada del chat
onClickMute	ninguno	función	botón de silencio
onClickVideoCall	ninguno	función	botón de videollamada

Componente de cuadro de mensaje

archivo	foto	texto	ubicación	video	audio

 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 ,
    } ,
  } }
/>

Accesorios del cuadro de mensajes

apuntalar	por defecto	tipo	descripción
identificación	yo (índice)	cadena	identificación del cuadro de mensaje
posición	izquierda	cadena	posición del cuadro de mensaje
tipo	texto	cadena	tipo de mensaje (texto, foto, archivo, ubicación, spotify, video, audio)
texto	ninguno	cadena	texto del mensaje
título	ninguno	cadena	título del mensaje
títuloColor	ninguno	cadena (color)	color del título del mensaje
datos	{}	objeto	datos del mensaje
fecha	nueva fecha()	Fecha	fecha del mensaje
cadena de fecha	ninguno	cadena	el mensaje representa dateString o timeagojs (ahora, fecha)
al hacer clic	ninguno	función	mensaje al hacer clic (se devuelve el mensaje (objeto))
abierto	ninguno	función	mensaje al abrir (archivo o foto) (se devuelve el mensaje (objeto))
enDescargar	ninguno	función	mensaje al descargar (archivo o foto) (se devuelve el mensaje (objeto))
en carga	ninguno	función	mensaje al cargar foto
enFotoError	ninguno	función	mensaje en foto de error
en TítuloHaga clic	ninguno	función	título del mensaje en el evento de clic
enHacia AdelanteHaga clic	ninguno	función	reenviar mensaje al hacer clic en evento
enResponderHaga clic	ninguno	función	mensaje de respuesta al hacer clic en el evento
enReuniónMensajeHaga clic	ninguno	función	mensaje de reunión al hacer clic en evento
enMeetingTitleClick	ninguno	función	mensaje del título de la reunión al hacer clic en el evento
onMeetingVideoEnlaceHaga clic	ninguno	función	mensaje de enlace de video de reunión al hacer clic en evento
enResponderMensajeHacer clic	ninguno	función	responder mensaje al evento de clic
enRemoveMessageClick	ninguno	función	mensaje eliminar al hacer clic en evento
onMeetingMásSeleccionar	ninguno	función	elemento de la lista de mensajes en el evento MeetingMoreSelect, obtiene 3 parámetros: elemento de mensaje, índice del elemento, evento
enMeetingEnlaceHaga clic	ninguno	función	enlace de reunión al hacer clic en evento
en el menú contextual	ninguno	función	evento de clic en el menú contextual del mensaje
reenviado	ninguno	booleano	icono de reenvío de mensaje
botón de respuesta	ninguno	booleano	icono de respuesta de mensaje
eliminar botón	ninguno	booleano	icono de eliminar mensaje
estado	ninguno	cadena	información de estado del mensaje (en espera, enviado, recibido, leído)
muesca	verdadero	booleano	muesca del cuadro de mensaje
avatar	ninguno	URL	URL del avatar del cuadro de mensaje
renderAddCmp	ninguno	función (componente)	agregar componentes personalizados al cuadro de mensaje
copiableFecha	FALSO	booleano	cuadro de mensaje fecha texto copiable
enfocar	FALSO	booleano	utilizado en la función de enfoque de mensajes en el componente MessageList, enfoca el estilo del componente
en mensaje enfocado	ninguno	función	hace que el valor de enfoque sea falso después de que el mensaje se convierte en foco
responder	ninguno	objeto	datos de respuesta
retraído	ninguno	booleano	mensaje eliminado o retractado
reenviadoMensajeTexto	reenviado	cadena	texto del mensaje reenviado

Componente de mensaje de respuesta

 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.' }
/>

mensaje de respuesta

Componente de mensaje de reunión

 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 ( ) ,
            ] }
        } ,
        .
        .
        .
    ] } / >

Accesorios para mensajes de reunión

apuntalar	por defecto	tipo	descripción
sujeto	ninguno	cadena	Mensaje de reunión
título	ninguno	cadena	Título de la reunión
fecha	nueva fecha()	Fecha	Fecha de la reunión
colapsarTítulo	ninguno	cadena	Subtítulo de la reunión
participantes	[]	formación	Matriz de participantes de la reunión
másArtículos	ninguno	formación	mensaje más artículos
fuente de datos	[]	formación	matriz de lista de reuniones
al hacer clic	ninguno	función	mensaje de reunión al hacer clic en el evento (se devuelve el mensaje (objeto))
enMeetingTitleClick	ninguno	función	Mensaje del título de la reunión al hacer clic en el evento (se devuelve el mensaje (objeto))
onMeetingVideoEnlaceHaga clic	ninguno	función	Mensaje de enlace de video de reunión al hacer clic en el evento (se devuelve el mensaje (objeto))
onMeetingMásSeleccionar	ninguno	función	elemento de la lista de mensajes en el evento MeetingMoreSelect, obtiene 3 parámetros: elemento de mensaje, índice del elemento, evento

Componente MeetingLink

reuniónenlace-foto

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

Accesorios de MeetingLink

apuntalar	por defecto	tipo	descripción
ID de reunión	ninguno	cadena	ID del enlace de la reunión
título	ninguno	cadena	Título del enlace de la reunión
enMeetingEnlaceHaga clic	ninguno	función	enlace de reunión al hacer clic en evento

Componente de mensaje del sistema

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

Accesorios de mensajes del sistema

apuntalar	por defecto	tipo	descripción
texto	ninguno	cadena	texto del mensaje

Componente de lista de mensajes

lista de mensajes-foto

 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 ( ) ,
	    } ,
	    .
	    .
	    .
	] } />

Accesorios de lista de mensajes

apuntalar	por defecto	tipo	descripción
referencia	ninguno	objeto	referencia de la lista de mensajes
nombre de clase	ninguno	cadena	lista de mensajes opcional nombre de clase
fuente de datos	[]	formación	matriz de lista de mensajes
bloqueable	FALSO	booleano	Se bloquea en la posición de desplazamiento cuando se ha cambiado la fuente de datos.
hasta la altura inferior	300	int o cadena (sólo '100%')	Si el valor de la propiedad toBottomHeight es mayor que el valor inferior de la barra de desplazamiento cuando se ha cambiado la fuente de datos, la barra de desplazamiento va al final de la página. Si el valor de la propiedad toBottomHeight se ha establecido en '100%' , la barra de desplazamiento va al final de la página cuando se cambia la fuente de datos.
al hacer clic	ninguno	función	elemento de la lista de mensajes al hacer clic (se devuelve el mensaje (objeto))
abierto	ninguno	función	elemento de la lista de mensajes al abrir (archivo o foto) (se devuelve el mensaje (objeto))
enDescargar	ninguno	función	elemento de la lista de mensajes al descargar (archivo o foto) (se devuelve el mensaje (objeto))
en desplazamiento	ninguno	función	lista de mensajes evento onScroll
enHacia AdelanteHaga clic	ninguno	función	elemento de la lista de mensajes en el evento ForwardClick
enResponderHaga clic	ninguno	función	elemento de la lista de mensajes evento onReplyClick
enResponderMensajeHacer clic	ninguno	función	elemento de la lista de mensajes en el evento ReplyMessageClick
botón abajo	verdadero	booleano	lista de mensajes desplácese hasta el botón inferior
abajoBotónInsignia	ninguno	booleano	lista de mensajes contenido de la insignia del botón abajo
en el botón abajoHaga clic	ninguno	función	lista de mensajes enDownButtonClick
en el menú contextual	ninguno	función	elemento de la lista de mensajes evento onContextMenu, obtiene 3 parámetros: elemento de mensaje, índice del elemento, evento
enFotoError	ninguno	función	elemento de la lista de mensajes en la foto de error

Componente de lista de chat

foto-lista de chat

 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 ,
        } ,
        .
        .
        .
    ] } />

Accesorios de la lista de chat

apuntalar	por defecto	tipo	descripción
nombre de clase	ninguno	cadena	lista de chat opcional nombre de clase
fuente de datos	[]	formación	matriz de lista de chat
al hacer clic	ninguno	función	elemento de la lista de chat al hacer clic (se devuelve el chat (objeto))
en el menú contextual	ninguno	función	elemento de la lista de chat en el menú contextual (se devuelve chat(objeto))
enAvatarError	ninguno	función	Error en el elemento de la lista de chat de Avatar img
perezosoCargandoImagen	ninguno	ruta de la imagen	imagen de carga diferida

Componente de entrada

 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 ( )

Accesorios de entrada

apuntalar	por defecto	tipo	descripción
referencia	ninguno	objeto	referencia de entrada
nombre de clase	ninguno	cadena	entrada opcional nombre de clase
marcador de posición	ninguno	cadena	introducir texto de marcador de posición
valor predeterminado	ninguno	cadena	valor predeterminado de entrada
en cambio	ninguno	función	función de entrada en cambio
multilínea	FALSO	booleano	la entrada es área de texto
altura automática	verdadero	booleano	altura automática de entrada
altura mínima	25	entero	altura mínima de entrada
altura máxima	200	entero	altura máxima de entrada
estilo de entrada	ninguno	objeto	objeto de estilo de entrada
botones izquierdo	ninguno	objeto (componente)	componente de botones izquierdo
botones derecho	ninguno	objeto (componente)	componente de botones derechos
árbitro	ninguno	función	entrada o referencia de área de texto
longitud máxima	ninguno	entero	longitud máxima de entrada o área de texto
enMaxLengthExceed	ninguno	función	llamado cuando la longitud máxima excede
enfoque automático	FALSO	booleano	enfoque automático de entrada
valor	ninguno	cadena	valor de entrada

Componente de botón

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

Accesorios de botones

apuntalar	por defecto	tipo	descripción
tipo	ninguno	cadena	tipo de botón (delineado, transparente)
desactivado	ninguno	cadena	¿El botón está deshabilitado?
texto	ninguno	cadena	texto del botón
botónRef	ninguno	función	referencia del botón
título	ninguno	cadena	título del botón

Componente emergente

 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' ,
    } ,
  ] }
/>

Accesorios emergentes

apuntalar	por defecto	tipo	descripción
espectáculo	FALSO	booleano	ventana emergente visible
encabezamiento	ninguno	cadena	mensaje de título emergente (encabezado)
encabezadoBotones	ninguno	formación	Botones de título emergente (encabezado)
texto	ninguno	cadena	mensaje de contenido emergente (centro)
color	#333	cuerda (color)	color del mensaje de contenido emergente
Botones de pie de página	ninguno	formación	botones de pie de página emergentes
renderEncabezado	ninguno	función (componente)	función de encabezado de renderizado
renderizar contenido	ninguno	función (componente)	función de renderizado de contenido
renderPie de página	ninguno	función (componente)	función de pie de página

Componente de barra lateral

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

Accesorios de barra lateral

apuntalar	por defecto	tipo	descripción
tipo	luz	cadena	tipo de estilo de barra lateral (por ejemplo: claro, oscuro)
arriba	ninguno	componente	componente superior de la barra lateral
centro	ninguno	componente	componente central de la barra lateral
abajo	ninguno	componente	componente inferior de la barra lateral

Componente de barra de navegación

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

Accesorios de la barra de navegación

apuntalar	por defecto	tipo	descripción
tipo	luz	cadena	tipo de estilo de la barra de navegación (por ejemplo: claro, oscuro)
izquierda	ninguno	componente	componente izquierdo de la barra de navegación
centro	ninguno	componente	componente central de la barra de navegación
bien	ninguno	componente	componente derecho de la barra de navegación

Componente desplegable

 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' ,
    } ,
  ] }
/>

Accesorios desplegables

apuntalar	por defecto	tipo	descripción
tipo de animación	ninguno	cadena	desvanecerse o por defecto
animaciónPosición	noroeste	cadena	Posición de inicio de la animación (noroeste, noreste, suroeste, sureste)
elementos	ninguno	formación	matriz de elementos desplegables
en Seleccionar	ninguno	función	elemento en seleccionar
botónAccesorios	ninguno	objeto	propiedades del botón

Componente de avatar

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

Accesorios de avatar

apuntalar	por defecto	tipo	descripción
src	ninguno	imagen	imagen original
alternativo	ninguno	cadena	descripción alternativa de la imagen
tamaño	por defecto	cadena	tamaño de la imagen. predeterminado (25 px), xsmall (30 px), pequeño (35 px), mediano (40 px), grande (45 px), xlarge (55 px)
tipo	por defecto	cadena	tipos: predeterminado, círculo, redondeado (radio de borde 5px), flexible
cartaArtículo	ninguno	objeto	avatar para ser una letra
elemento lateral	ninguno	componente	elemento lateral de avatar
enError	ninguno	componente	imagen de avatar onerror
perezosoCargandoImagen	ninguno	ruta de la imagen	imagen de carga diferida

Componente de mensaje de ubicación

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

UbicaciónAccesorios de mensaje

apuntalar	por defecto	tipo	descripción
src	ninguno	imagen	imagen original
apiKey	ninguno	cadena	clave de API de mapa estático de Google
zoom	14	entero	nivel de zoom del mapa estático de google
marcadorColor	rojo	cadena	Color del marcador de mapa estático de Google
datos	{}	objeto	datos del mensaje
objetivo	_blanco	cadena	Imagen de una etiqueta de objetivo.
abierto	ninguno	función	imagen en abierto

Componente de mensajes de Spotify

spotificar

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

SpotifyAccesorios de mensajes

apuntalar	por defecto	tipo	descripción
uri	ninguno	uri	spotify uri
tema	negro	cadena	color del tema de spotify (blanco o negro)
vista	lista	cadena	Tipo de vista de Spotify (lista o portada)
datos	{}	objeto	datos del mensaje
ancho	300	entero	ancho de inserción de spotify
altura	380	entero	altura de inserción de spotify

Componente MeetingItem

foto-reunion

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

Accesorios de elementos de reunión

apuntalar	por defecto	tipo	descripción
sujeto	ninguno	cadena	Asunto del elemento de reunión
límite de asunto	60	entero	Límite de texto del asunto del elemento de reunión
fecha	ninguno	fecha	Fecha del artículo de reunión
cadena de fecha	ninguno	cadena	MeetingItem representa dateString o timeagojs (ahora, fecha)
perezosoCargandoImagen	ninguno	ruta de la imagen	imagen de carga diferida
cerrable	verdadero	booleano	Elemento de reunión que se puede cerrar
al hacer clic	ninguno	función	Elemento de reunión al hacer clic
enReuniónHaga clic	ninguno	función	MeetingItem al hacer clic en la reunión
enCompartirHaga clic	ninguno	función	MeetingItem al hacer clic en compartir
al cerrar clic	ninguno	función	MeetingItem al hacer clic en cerrar
avatares	ninguno	fecha	Avatares de elementos de reunión
avatarLímite	5	fecha	Límite de avatares de MeetingItem
audiosilenciado	verdadero	booleano	Audio de MeetingItem silenciado
fuente de audio	nulo	cadena	Fuente de audio de MeetingItem

Componente Lista de reuniones

reuniónLista-foto

reuniónCerrable

 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' ,
            } ]
        } ,
        .
        .
        .
    ] } />

Accesorios de la lista de reuniones

apuntalar	por defecto	tipo	descripción
nombre de clase	ninguno	cadena	lista de reuniones opcional nombre de clase
fuente de datos	[]	formación	matriz de lista de reuniones
al hacer clic	ninguno	función	elemento de la lista de reuniones al hacer clic (se devuelve la reunión (objeto))
enReuniónHaga clic	ninguno	función	elemento de la lista de reuniones al hacer clic en la reunión (se devuelve la reunión (objeto))
enCompartirHaga clic	ninguno	función	elemento de la lista de reuniones al hacer clic en compartir (se devuelve la reunión (objeto))
al cerrar clic	ninguno	función	elemento de la lista de reuniones al hacer clic en cerrar (se devuelve la reunión (objeto))
en el menú contextual	ninguno	función	elemento de la lista de reuniones en el menú contextual (se devuelve la reunión (objeto))
enAvatarError	ninguno	función	Error en lista de reuniones en avatar img
perezosoCargandoImagen	ninguno	ruta de la imagen	imagen de carga diferida

Expandir