React Higher Order component to implement accessibility of emojis in text.

cureEmoji.js

import React from 'react';

import emojiTree from 'emoji-tree';


const cureEmoji = props => {

    let textChuck = '';
    let formattedText = [];

    const brokenString = [...props.text];

    brokenString.forEach((char, index) => {
        if (emojiTree(char)[0].type === 'emoji') {
            if (textChuck !== '') {
                formattedText.push(<span key={index - 1}>{textChuck}</span>);
                textChuck = '';
            }
            formattedText.push(
                <span
                    key={index}
                    className="emoji"
                    role="img"
                    aria-hidden="true"
                >
                    {char}
                </span >
            );
        } else {
            textChuck += char;
        }
        if (brokenString.length - 1 === index && textChuck !== '') {
            formattedText.push(<span key={index}>{textChuck}</span>);
            textChuck = '';
        }
    });

    return (
        [
            ...formattedText
        ]
    )
};
export default cureEmoji;