https://github.com/banyan/react-emoji
An emoji mixin for React
https://github.com/banyan/react-emoji
Last synced: 9 days ago
JSON representation
An emoji mixin for React
- Host: GitHub
- URL: https://github.com/banyan/react-emoji
- Owner: banyan
- License: mit
- Created: 2015-03-23T06:38:23.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-06-08T10:24:02.000Z (almost 8 years ago)
- Last Synced: 2025-03-30T05:04:48.916Z (16 days ago)
- Language: JavaScript
- Size: 846 KB
- Stars: 197
- Watchers: 1
- Forks: 39
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - react-emoji - An emoji mixin for React. (Uncategorized / Uncategorized)
- awesome-list - react-emoji - An emoji mixin for React. (Demos / Icons)
README
# react-emoji
[](https://circleci.com/gh/banyan/react-emoji)
[](https://www.npmjs.com/package/react-emoji)
>An emoji mixin for React
## Features
* Switchble emoji assets ([twemoji](https://github.com/twitter/twemoji) or [Emoji One](https://github.com/Ranks/emojione))
* Supports emoticons such as `:) :(`
## Compatible React Versions
[email protected] and [email protected] both can be used <= [email protected].
However, [test code](https://github.com/banyan/react-emoji/tree/master/test) depends on [email protected], it's internal though.
## Demo
[banyan.github.io/react-emoji](http://banyan.github.io/react-emoji/)
## Install
```shell
npm i react-emoji
# or
bower i react-emoji # `window.ReactEmoji` is available
```
## Usage
```jsx
let App = React.createClass({
getDefaultProps() {
return {
text: "foo bar :100: :)",
};
},
mixins: [
ReactEmoji
],
render() {
return (
{ this.emojify(this.props.text) }
{ ReactEmoji.emojify(this.props.text) } // or can be used no mixin way
);
}
});
```
## API
### emojify(text, options)
#### Default options
All options are optional.
Properties | Description | Default | Type
---|---|---|---
useEmoticon | Use emoticon or not| true | Boolean
emojiType | twemoji or emojione are available | twemoji | String
host | Custom host | "" | String
path | Custom path | "" | String
ext | asset ext. svg or png are available | svg | String
attributes | Attributes such as className or onClick | {width: '20px', height: '20px'} | Object
singleEmoji | Show single emoji (either of annotation or emoticon), use this option if input is limited to render single emoji, this is slightly faster | false | Boolean
strict | Throw an error if annotation is not in dict, it's handy if emoji input is not from end user | false | Boolean
## Tips
In tandem with [react-autolink](https://github.com/banyan/react-autolink).
## Development
### Dependency
```
$ npm i
```
### Run
```
$ npm start # => http://0.0.0.0:8080
```
### Test
```
$ npm test
```
## License
MIT