React hashtags parser with custom renderer and click action on each hashtag.
npm install react-hashtagReact Hashtag
====
Enhance your strings with _live_ components.



Preact: https://codesandbox.io/s/qv8qz89ll9
jsx harmony
// Your typical 'component'
const Card = () => (
Here goes my card contents with #static text inside
);// Will become
import ReactHashtag from "react-hashtag";
const Card = () => (
Here goes my card contents with #static text inside
);
`Install
The usual flow`bash
npm install react-hashtag --save
`Api
The 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
. 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.
Examples
$3
`jsx harmony
const Card = (props) => (
renderHashtag={(hashtagValue) => (
{hashtagValue}
)}
>
{props.children}
);
`$3
`jsx harmonyconst Hashtag = styled.span
;const Card = (props) => (
renderHashtag={(hashtagValue) => (
{hashtagValue}
)}
>
{props.children}
);
`$3
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.
`jsx harmony
const StyledHashtag = styled.a;/**
* Custom component to render the hashtags with a custom renderer
*/
const Hashtags = (props) => (
renderHashtag={(hashtagValue) => (
href={
/search/${hashtagValue}}
>
{hashtagValue}
)}
>
{props.children}
);const Card = (props) => (
{props.children}
);
``