OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to make chat like UI with chat bubbles in React JS

  • Thread starter Thread starter mevrick
  • Start date Start date
M

mevrick

Guest
I have some JSON data in dummyData. I am not sure how can I place the chat bubbles on left and right according to the direction. I am using Material UI and context API. Image for the reference. I don't want to use any library other than material UI.

enter image description here

Currently, every chat bubble is positioned to the left. How to position bubbles according to the direction. Code so far (CodeSandbox):

Code:
    import React from 'react';
import makeStyles from '@material-ui/core/styles/makeStyles';

const useStyles = makeStyles(theme => ({
    container: {
        bottom: 0,
        position: 'fixed'
    },
    bubbleContainer: {
        width: '100%'
    },
    bubble: {
        border: '0.5px solid black',
        borderRadius: '10px',
        margin: '5px',
        padding: '10px',
        display: 'inline-block'
    }
}));

const ChatLayout = () => {
    const classes = useStyles();
    const dummyData = [
        {
            message: '1: This should be in left',
            direction: 'left'
        },
        {
            message: '2: This should be in right',
            direction: 'right'
        },
        {
            message: '3: This should be in left again',
            direction: 'left'
        }
    ];

    const chatBubbles = dummyData.map((obj, i = 0) => (
        <div className={classes.bubbleContainer}>
            <div key={i++} className={classes.bubble}>
                <div className={classes.button}>{obj.message}</div>
            </div>
        </div>
    ));
    return <div className={classes.container}>{chatBubbles}</div>;
};

export default ChatLayout;

<p>I have some JSON data in <code>dummyData</code>. I am not sure how can I place the chat bubbles on left and right according to the <code>direction</code>. I am using Material UI and context API. Image for the reference. I don't want to use any library other than material UI.</p>

<p><a href="https://i.sstatic.net/XK4RX.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/XK4RX.png" alt="enter image description here"></a></p>

<p>Currently, every chat bubble is positioned to the left. How to position bubbles according to the <code>direction</code>. Code so far (<a href="https://codesandbox.io/s/youthful-feather-47rbt" rel="nofollow noreferrer">CodeSandbox</a>):</p>

<pre><code> import React from 'react';
import makeStyles from '@material-ui/core/styles/makeStyles';

const useStyles = makeStyles(theme => ({
container: {
bottom: 0,
position: 'fixed'
},
bubbleContainer: {
width: '100%'
},
bubble: {
border: '0.5px solid black',
borderRadius: '10px',
margin: '5px',
padding: '10px',
display: 'inline-block'
}
}));

const ChatLayout = () => {
const classes = useStyles();
const dummyData = [
{
message: '1: This should be in left',
direction: 'left'
},
{
message: '2: This should be in right',
direction: 'right'
},
{
message: '3: This should be in left again',
direction: 'left'
}
];

const chatBubbles = dummyData.map((obj, i = 0) => (
<div className={classes.bubbleContainer}>
<div key={i++} className={classes.bubble}>
<div className={classes.button}>{obj.message}</div>
</div>
</div>
));
return <div className={classes.container}>{chatBubbles}</div>;
};

export default ChatLayout;
</code></pre>
 

Latest posts

Top