Enhance your strings with live hashtag components.
- Super small ~430 B
- Available for React and Preact
- Custom renderer for each hashtag
- Custom 'click' handler for each hashtag
- Generic output
- Drop-in and use it. Your code will not have to adapt to anything.
React: https://codesandbox.io/s/qxow0z7v49
Preact: https://codesandbox.io/s/qv8qz89ll9
// Your typical 'component'
const Card = () => (
<p>
Here goes my card contents with #static text inside
</p>
);
// Will become
import ReactHashtag from "react-hashtag";
const Card = () => (
<p>
<ReactHashtag>
Here goes my card contents with #static text inside
</ReactHashtag>
</p>
);The usual flow
npm install react-hashtag --saveThe component ReactHashtag is actually pretty generic. Is not something that someone can't do in half an hour. But, this one has some generic API that could make you turn.
| Name | Type | Description |
|---|---|---|
| renderHashtag(value: String, onClick: Function) | function | Returns the custom element to be renderer instead of a <span>. You can go wild here. |
| onHashtagClick(value: String, e: Event) | function | The click handler for each hashtags. This will be called with the hashtag value that got clicked. |
const Card = (props) => (
<p>
<ReactHashtag
renderHashtag={(hashtagValue) => (
<div className="hashtag">{hashtagValue}</div>
)}
>
{props.children}
</ReactHashtag>
</p>
);const Hashtag = styled.span`
color: tomato;
`;
const Card = (props) => (
<p>
<ReactHashtag
renderHashtag={(hashtagValue) => (
<Hashtag>{hashtagValue}</Hashtag>
)}
>
{props.children}
</ReactHashtag>
</p>
);You could reuse the same definition, if that's something you're looking for. The following example uses the anchor and defines a component that will redirect to certain hashtag pages.
const StyledHashtag = styled.a`
color: tomato;
`;
/**
* Custom component to render the hashtags with a custom renderer
*/
const Hashtags = (props) => (
<ReactHashtag
renderHashtag={(hashtagValue) => (
<StyledHashtag
href={`/search/${hashtagValue}`}
>
{hashtagValue}
</StyledHashtag>
)}
>
{props.children}
</ReactHashtag>
);
const Card = (props) => (
<p>
<Hashtags>
{props.children}
</Hashtags>
</p>
);Feel free to file an issue if you have any questions.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent