https://github.com/cristianbote/react-hashtag

Super small component to custom render your hashtag within your text
https://github.com/cristianbote/react-hashtag

hashtag hastags preact react

Last synced: about 2 months ago
JSON representation

Super small component to custom render your hashtag within your text

• Host: GitHub
• URL: https://github.com/cristianbote/react-hashtag
• Owner: cristianbote
• Created: 2018-06-17T21:56:29.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-09-16T23:04:31.000Z (over 3 years ago)
• Last Synced: 2024-11-01T13:51:44.448Z (about 2 months ago)
• Topics: hashtag, hastags, preact, react
• Language: JavaScript
• Homepage:
• Size: 115 KB
• Stars: 19
• Watchers: 3
• Forks: 8
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
React Hashtag

====

Enhance your strings with _live_ hashtag components.

[![npm version](https://badge.fury.io/js/react-hashtag.svg?bust)](https://badge.fury.io/js/react-hashtag)

[![codecov.io Code Coverage](https://img.shields.io/codecov/c/github/cristianbote/react-hashtag.svg?maxAge=2592000)](https://codecov.io/github/cristianbote/react-hashtag?branch=master)

[![Build Status](https://travis-ci.org/cristianbote/react-hashtag.svg?branch=master)](https://travis-ci.org/cristianbote/react-hashtag)

[![gzip size](http://img.badgesize.io/https://unpkg.com/react-hashtag/dist/react-hashtag.js?compression=gzip)](https://unpkg.com/react-hashtag)

## Features:

* 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.

## Demo

React: https://codesandbox.io/s/qxow0z7v49

Preact: https://codesandbox.io/s/qv8qz89ll9

## Quick example

```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

### Custom renderer

```jsx harmony

const Card = (props) => (

    


         (

                
{hashtagValue}

            )}

        >

            {props.children}

        

    


);

```


### With styled components

```jsx harmony

const Hashtag = styled.span`

    color: tomato;

`;

const Card = (props) => (

    


         (

                {hashtagValue}

            )}

        >

            {props.children}

        

    

);

```


### Reusable or composition 

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`

    color: tomato;

`;

/**

* Custom component to render the hashtags with a custom renderer

*/

const Hashtags = (props) => (

     (

            

                {hashtagValue}

            

        )}

    >

        {props.children}

    

);

const Card = (props) => (

    


        

            {props.children}

        

    

);

```


## Questions?

Feel free to file an issue if you have any questions.