npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wecare-react-web-gifted-chat

v0.0.4

Published

The most complete chat UI for React Web

Downloads

5

Readme

Gifted Chat

Web fork of most complete chat UI for React Native (formerly known as Gifted Messenger).

Features

  • Fully customizable components
  • Composer actions (to attach photos, etc.)
  • Load earlier messages
  • Copy messages to clipboard
  • Touchable links using react-native-parsed-text
  • Avatar as user's initials
  • Localized dates
  • Multiline TextInput
  • InputToolbar avoiding keyboard

Installation

  • Using npm: npm install react-web-gifted-chat --save
  • Using Yarn: yarn add react-web-gifted-chat

Example

import { GiftedChat } from 'react-native-gifted-chat';

class Example extends React.Component {

  state = {
    messages: [],
  };

  componentWillMount() {
    this.setState({
      messages: [
        {
          _id: 1,
          text: 'Hello developer',
          createdAt: new Date(),
          user: {
            _id: 2,
            name: 'React Native',
            avatar: 'https://facebook.github.io/react/img/logo_og.png',
          },
        },
      ],
    });
  }

  onSend(messages = []) {
    this.setState((previousState) => ({
      messages: GiftedChat.append(previousState.messages, messages),
    }));
  }

  render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        onSend={(messages) => this.onSend(messages)}
        user={{
          _id: 1,
        }}
      />
    );
  }

}

Advanced example

See example/App.js for a working demo!

Message object

e.g.

{
  _id: 1,
  text: 'My message',
  createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
  user: {
    _id: 2,
    name: 'React Native',
    avatar: 'https://facebook.github.io/react/img/logo_og.png',
  },
  image: 'https://facebook.github.io/react/img/logo_og.png',
  // Any additional custom parameters are passed through
}

Props

  • messages (Array) - Messages to display
  • messageIdGenerator (Function) - Generate an id for new messages. Defaults to UUID v4, generated by uuid
  • user (Object) - User sending the messages: { _id, name, avatar }
  • onSend (Function) - Callback when sending a message
  • locale (String) - Locale to localize the dates
  • isAnimated (Bool) - Animates the view when the keyboard appears
  • loadEarlier (Bool) - Enables the "Load earlier messages" button
  • onLoadEarlier (Function) - Callback when loading earlier messages
  • isLoadingEarlier (Bool) - Display an ActivityIndicator when loading earlier messages
  • renderLoading (Function) - Render a loading view when initializing
  • renderLoadEarlier (Function) - Custom "Load earlier messages" button
  • renderAvatar (Function) - Custom message avatar; set to null to not render any avatar for the message
  • onPressAvatar (Function(user)) - Callback when a message avatar is tapped
  • renderAvatarOnTop (Bool) - Render the message avatar at the top of consecutive messages, rather than the bottom (default)
  • renderBubble (Function) - Custom message bubble
  • onLongPress (Function(context, message)) - Callback when a message bubble is long-pressed; default is to show an ActionSheet with "Copy Text" (see example using showActionSheetWithOptions())
  • renderMessage (Function) - Custom message container
  • renderMessageText (Function) - Custom message text
  • renderMessageImage (Function) - Custom message image
  • imageProps (Object) - Extra props to be passed to the <Image> component created by the default renderMessageImage
  • lightboxProps (Object) - Extra props to be passed to the MessageImage's Lightbox
  • renderCustomView (Function) - Custom view inside the bubble
  • renderDay (Function) - Custom day above a message
  • renderTime (Function) - Custom time inside a message
  • renderFooter (Function) - Custom fixed bottom view, e.g. "User is typing..."; see example/App.js for an example
  • renderInputToolbar (Function) - Custom message composer container
  • renderComposer (Function) - Custom text input message composer
  • renderActions (Function) - Custom action button on the left of the message composer
  • renderSend (Function) - Custom send button
  • renderAccessory (Function) - Custom second line of actions below the message composer
  • onPressActionButton (Function) - Callback when the Action button is pressed (if set, the default actionSheet will not be used)
  • bottomOffset (Integer) - Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar)
  • minInputToolbarHeight (Integer) - Minimum height of the input toolbar; default is 44
  • listViewProps (Object) - Extra props to be passed to the messages <ListView>; some props can't be overridden, see the code in MessageContainer.render() for details
  • keyboardShouldPersistTaps (Enum) - Determines whether the keyboard should stay visible after a tap; see <ScrollView> docs
  • onInputTextChanged (Function) - Callback when the input text changes
  • maxInputLength (Integer) - Max message composer TextInput length

License