cristianbote / react-hashtag Goto Github PK
View Code? Open in Web Editor NEWSuper small component to custom render your hashtag within your text
Super small component to custom render your hashtag within your text
I think you should add a link to this repository in the npm registry:
https://www.npmjs.com/package/react-hashtag
Export a separate react and preact component with the same code.
`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>`
Your library perfectly fits into one of my needs and renders hashtags from a string.
But in other place I need to "hashtagify" html string and basically what I need it to be able somehow to parse not only a string child.
Example:
const text = "<p>Here is some content with a #hashtag</p>";
<ReactHashtag renderHashtag={hashtag => <Hashtag hashtag={hashtag} />}>
<div
dangerouslySetInnerHTML={{
__html: text
}}
/>
</ReactHashtag>
I am wondering is this somehow possible to be added to this package?
Error message: Encountered two children with the same key, #hashtag
. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
how can I end hashtag with some special character like $%^&* ?
for example
"#taga #tagb& #tagc123😊¥“
#taga、#tagb、#tagc123😊 are hashtag, not including $%^&*
Will be good if we can use this framework for hashtags and for user mentions.
(e.g. @Vista1nik)
I know it's not a big deal, but I can't clear all my linting errors because I'm getting the following:
Module not found: Can't resolve 'preact' in '{my path}/node_modules/react-hashtag/dist'
Not sure what if anything that can be done.
This package works perfectly fine when rendering hashtags from a given string.
However, it would be great if it could be used for taking inputs as well! (I wish to use this package to allow the user to add hashtags in a textfield input area).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.