https://github.com/thebusinessbay/bbcomponents
An open source repository for common React components used in UI design
https://github.com/thebusinessbay/bbcomponents
react react-component-library ui ux
Last synced: about 1 month ago
JSON representation
An open source repository for common React components used in UI design
- Host: GitHub
- URL: https://github.com/thebusinessbay/bbcomponents
- Owner: thebusinessbay
- License: gpl-3.0
- Created: 2019-07-10T04:13:15.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-11-08T03:58:34.000Z (over 2 years ago)
- Last Synced: 2025-03-07T05:34:36.215Z (2 months ago)
- Topics: react, react-component-library, ui, ux
- Language: JavaScript
- Size: 308 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# bbcomponents
An open source repository for common React components used in UI design
bbcomponents use styled-component to work, you should install it before
## Install styled-components
`npm i styled-components`
## Install bbcomponents
`npm i bbcomponents`
## Create a chat
```javascript
import { Chat } from "bbcomponents";
// Example of props for the Chat component
const exampleChatProps = {
title: "Sonoritmo",
buttonPlaceholder: "¿Buscabas algo o tienes alguna duda?, inicia un chat",
agentProfilePicUrl: "https://image.flaticon.com/icons/svg/327/327779.svg",
customerProfilePicUrl:
"https://lh5.googleusercontent.com/-DcksDlQ970o/AAAAAAAAAAI/AAAAAAAAACo/AKfwigGQO3U/photo.jpg",
messages: [
{
id: "100",
name: "Sonoritmo",
message: "Hola cliente",
timestamp: "2019-07-13 12:00:00",
type: "agent"
},
{
id: "101",
name: "William",
message: "Hola sonoritmo",
timestamp: "2019-07-13 12:00:01",
type: "customer"
},
{
id: "102",
name: "Sonoritmo",
message: "en que te ayudo?",
timestamp: "2019-07-13 12:00:02",
type: "agent"
},
{
id: "104",
name: "Sonoritmo",
message: "Hola cliente",
timestamp: "2019-07-13 12:00:00",
type: "agent"
},
{
id: "105",
name: "William",
message: "Hola sonoritmo",
timestamp: "2019-07-13 12:00:01",
type: "customer"
},
{
id: "106",
name: "Sonoritmo",
message: "en que te ayudo?",
timestamp: "2019-07-13 12:00:02",
type: "agent"
}
],
displayUserName: "William",
mainColor: "#282c34",
headerTextColor: "white",
metadata: {
custom: "here you can storage custom attributes",
section: "instruments"
},
newMessageHandler: msg => console.log(msg), // This function will be triggered after a new message is submited
customerIsAuthenticated: true, // If you need to perform a login in your app before activating the chat it should be false
handleUserAuthentication: () =>
alert("You have to be logged in to chat with us!") // If customerIsAuthenticated = false it will be triggered when user press the circle chat icon
};
render(){
return
}
```
## Try the Chat component online
https://codesandbox.io/s/bbcomponents-chat-example-h40jb