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 flowbash
npm install react-hashtag --save
`Api
The component 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) => (
{hashtagValue}
)}
>
{props.children}
);
`$3
jsx harmonyconst Hashtag = styled.span
;const Card = (props) => (
{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) => (
/search/${hashtagValue}}
>
{hashtagValue}
)}
>
{props.children}
);const Card = (props) => (
{props.children}
);
``