Giters

cristianbote / react-hashtag

Super small component to custom render your hashtag within your text

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Not working. Wont render hashtags, just plain #text

thekushkode opened this issue · comments

commented

`import React from 'react'
import ReactHashtag from "react-hashtag";

export default function Post(props) {

if (props.data.feedImgURL) {
    
    return (
        <MDBJumbotron>
            <div className='mb-4' style={{ display: 'flex', flexDirection: 'row-reverse', marginTop: '-10px' }}>
                <Hamburger key={props.data.docId}/>
            </div>
            <div className='news'>
                <div className="excerpt ml-4 d-flex justify-content-between">
                    <div className='label m-auto align-items-start h-100 mt-0 col-4'>
                        <img
                            src={props.data.Avatar ? props.data.Avatar : defaultDogImg}
                            alt=""
                            className="rounded-circle z-depth-1-half"
                            style={{ width: '75px', height: '75px', objectFit: 'cover', margin: '0 auto' }}
                        />
                        <div className="brief">
                            <Link to={`/user/${props.data.DogID}`} className="name">
                                {props.data.SenderName}
                            </Link> posted a new photo
                    <div className="date">- {moment(props.data.timestamp.toDate()).fromNow()}</div>
                        </div>
                    </div>
                    <div className="added-text my-2 m-auto col-8 align-items-center">
                        <h6><strong><ReactHashtag>{props.data.Content}</ReactHashtag></strong></h6>
                        {<ModalImage small={props.data.feedImgURL} large={props.data.feedImgURL} style={{ width: '350px', borderRadius: '25px' }} />}
                        <div className="feed-footer">
                            <button onClick={handleIncrement} style={{ border: 'none', color: 'red' }} className="like mt-2">
                                <MDBIcon icon="heart" />
                                <span> {props.data.Likes} </span> likes
                            </button>
                        </div>
                        <MDBContainer className='mt-2'>
                            <FacebookShareButton url={`https://www.socialhound.co/user/${props.data.DogID}`} quote={props.data.content}>
                                <FacebookIcon className='mr-1' size={32} round />
                            </FacebookShareButton>
                            <TwitterShareButton url={`localhost:3000/user/${props.data.DogID}`} title={props.data.content}>
                                <TwitterIcon className='mr-1' size={32} round />
                            </TwitterShareButton>
                            <EmailShareButton url={`localhost:3000/user/${props.data.DogID}`} subject={`Email from ${props.data.SenderName}`}>
                                <EmailIcon className='mr-1' size={32} round />
                            </EmailShareButton>
                        </MDBContainer>
                    </div>
                </div>
            </div>
        </MDBJumbotron>`
commented

Hi @thekushkode,

Thanks for opening this issue. I'd like to clear up the usage of react-hashtag so I'm gonna break it down a bit.

ReactHashtag will parse it's children, the text content, and will wrap each hashtag found with a <span>. So, after that you have two choices:

  1. Style the <span> inside (https://codesandbox.io/s/react-hashtag-with-style-dv41u)
  2. Define a new renderHashtag that receives the hashtag text and needs to return a React children. (https://codesandbox.io/s/react-hashtag-with-renderhashtag-5bxso)

Hope the above clears up the confusion and your question. Let me know if it did not and I'll try to come up with more details.

Have a great one!

commented