ealush / emoji-picker-react Goto Github PK
View Code? Open in Web Editor NEWThe most popular React Emoji Picker
Home Page: https://ealush.com/emoji-picker-react/
License: MIT License
The most popular React Emoji Picker
Home Page: https://ealush.com/emoji-picker-react/
License: MIT License
Some of the PNG from your set are not being served by the CDN:
EG: https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/263a-fe0f.png
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>387806EF168052A6</RequestId>
<HostId>
SseLs5gyr8xkv/JthqB8cSmhEZfivql2D7MndRDMXHRQHgTL3UJhRlFVjCUnxvs1PEJmKp2RsSM=
</HostId>
</Error>
Title. I've tried the demo and it takes a second or more on each keystroke to update UI.
How to hide(or disable) skinTone picker?
Image
Hello, if I'd want to load one personalized emoji to show it with the others, can I do that?
I need to click twice to trigger onEmojiClick
devDependency
enzyme was updated from 3.9.0
to 3.10.0
.devDependency
enzyme-adapter-react-16 was updated from 1.13.2
to 1.14.0
.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.
enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Some of the smiles are duplicated. Is this a bug or a feature?
We tried to use the picker but we noticed that the default config is 160px for an emoji picker is too much.
We suggest to use a 16px or 32pxso the file size is reduced onload. That can be the reason why performance is affected.
devDependency
enzyme was updated from 3.9.0
to 3.10.0
.devDependency
enzyme-adapter-react-16 was updated from 1.14.0
to 1.15.0
.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.
enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Clicking on an emoji changes the router location by adding the "#!" which then triggers re-render on all router dependent components (React Router 4.4.0, react-router-dom 4.4.2, emoji-picker-react 1.7.1, react 16)
Hello @ALL, thanks for the nice package, this package works perfectly on mac os & iOS but it's not working on a windows system, Any help?
document is not defined
const [chosenEmoji, setChosenEmoji] = useState(null);
const [mounted, setMounted] = useState(null);
useEffect(() => setMounted(true), []);
.......
{mounted &&
<Fragment>
<Picker onEmojiClick={(event, emojiObject) => {
setChosenEmoji(emojiObject);
}}/>
{chosenEmoji.emoji}
</Fragment>
}
Both in my app and on a mobile browser in the demo (https://ealush.github.io/emoji-picker-react/), searching returns no results
devDependency
enzyme was updated from 3.9.0
to 3.10.0
.devDependency
enzyme-adapter-react-16 was updated from 1.14.0
to 1.15.0
.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.
enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Hi! I was recently trying the latest version 3.1.6
of the emoji picker and the searchbar has the autofocus enabled by default. IMHO, this should be up to the developer as in some scenarios, e.g., Safari iPhone, the autofocus is handled by auto-zooming in if the font-size is below a specific threshold (I think if lower than 16px). I suggest to have a prop "autofocus" to be set to true
or false
in order to have more flexibility (maybe it would be interesting to have also a prop for font-sizes, or to enable/disable the search bar).
By the way, is there any workaround at this moment to disable the autofocus on searchbar?
Thanks in advance!
Apparently I use babel-polyfill in my own project too. Yet I don't find your config in webpack.config.js, how do i unuse it?
Hey! I love the component, but I'm wondering why you can't also add the actual emoji selected and add it to the returned object when you pick the emoji?
Having to render an image from a CDN for every emoji you want to render seems too expensive...
The component itself is really good, but since there are many stickers to load, it takes a time to load the component, it would be awesome to have a property to open the modal with the emojis, but show a Loading while the emojis are loading (not all emojis of course).
something like:
<Picker showLoading={true} />
Creating a new group with the name we want and assign images and values to group.
Why can i not add a style with that:
<Picker style={{width: 500}} onEmojiClick={this.onEmojiClick} />
2.3.2
to 2.3.3
.This version is covered by your current version range and after updating it in your project the build failed.
svg-url-loader is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 221 commits.
757cd4f
2.3.3
a37d5a0
chore: added DS_Store to gitignore
c6011d3
Merge pull request #315 from bhovhannes/improvements
90e1bdc
test: better jest config
3bab05d
test: add Jest configuration
758b647
perf: increase loader performance by avoiding re-parsing regexps
90763c1
test: switched to Jest
71857e7
Merge remote-tracking branch 'origin/master'
39362ca
Update .renovaterc
7d22d91
chore(deps): update dependency webpack to v4.34.0
9dab242
Merge pull request #313 from bhovhannes/renovate/css-loader-3.x
8cb755f
chore(deps): update dependency css-loader to v3
4b94056
Merge pull request #312 from bhovhannes/renovate/file-loader-4.x
bff4e70
fix(deps): update dependency file-loader to v4
35bbcb8
Merge pull request #311 from bhovhannes/renovate/webpack-4.x
There are 221 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
7.12.4
to 7.13.0
.This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
The new version differs by 74 commits.
f39829f
Update CHANGELOG and bump version
9e81dde
[Deps] update jsx-ast-utils
, resolve
e73a692
Merge pull request #2256 from mateuszsokola/master
b5fc9bf
[fix] jsx-props-no-multi-spaces
: support generic components (ts)
8bd3837
Fix Node 4 compatibility
005dad3
Revert "Replace mocha by jest"
6e4f43e
Replace mocha by jest
09f580c
Replace typescript-eslint-parser by @typescript-eslint/parser
861fdef
[fix] prop-types
: fix case with destructuring and defualt param
9fbd037
Fix ESLint 6 compat by providing parser as absolute path to RuleTester
8041075
Fix jsx-curly-brace-presence schema defaults
9cec705
Add next ESLint version to Travis
0d4725e
Add Node 12 and remove Node 4/6 from Travis
9192ec3
Update devDependencies
d5d2e82
Merge pull request #2250 from guliashvili/master
There are 74 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
There are three images there are getting an error on console.
https://cdn.jsdelivr.net/gh/iamcal/emoji-data@master/img-apple-64/2640-fe0f.png
https://cdn.jsdelivr.net/gh/iamcal/emoji-data@master/img-apple-64/2642-fe0f.png
https://cdn.jsdelivr.net/gh/iamcal/emoji-data@master/img-apple-64/2695-fe0f.png
I don't think this impact on the component, but I'm curious, would this component work on a intranet?
First this Component is awesome THANK YOU!
My asset path uses .svg at the end of the url but the component uses .png...
Thanks for developing and sharing this awesome package!
I'm trying to use this package using yarn, but while building I get following errors
✖ 「atl」: Checking finished with 9 errors
[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:12:7
TS2749: 'SKIN_TONE_NEUTRAL' refers to a value, but is being used as a type here. Did you mean 'typeof SKIN_TONE_NEUTRAL'?
[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:13:7
TS2749: 'SKIN_TONE_LIGHT' refers to a value, but is being used as a type here. Did you mean 'typeof SKIN_TONE_LIGHT'?
[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:14:7
TS2749: 'SKIN_TONE_MEDIUM_LIGHT' refers to a value, but is being used as a type here. Did you mean 'typeof SKIN_TONE_MEDIUM_LIGHT'?
[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:15:7
TS2749: 'SKIN_TONE_MEDIUM' refers to a value, but is being used as a type here. Did you mean 'typeof SKIN_TONE_MEDIUM'?
[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:16:7
TS2749: 'SKIN_TONE_MEDIUM_DARK' refers to a value, but is being used as a type here. Did you mean 'typeof SKIN_TONE_MEDIUM_DARK'?
[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:17:7
TS2749: 'SKIN_TONE_DARK' refers to a value, but is being used as a type here. Did you mean 'typeof SKIN_TONE_DARK'?
[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:38:9
TS2322: Type '(props: IEmojiPickerProps) => void' is not assignable to type 'FC<IEmojiPickerProps>'.
Type 'void' is not assignable to type 'ReactElement<any, any>'.
[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:38:52
TS1039: Initializers are not allowed in ambient contexts.
[at-loader] ./node_modules/emoji-picker-react/emoji-picker-react.d.ts:40:8
TS1183: An implementation cannot be declared in ambient contexts.
How do I solve this? I'm using typescript version 3.9.7
, yarn version 1.22.4
and webpack version 3.3.11
. Happy to provide more information.
Thank you!
Kuldeep
Hello!
I want to use i18n, but the ts shows an error that the groupNames object is not in props
export interface IEmojiPickerProps {
onEmojiClick: (event: MouseEvent, data: IEmojiData) => void;
emojiUrl?: string;
preload?: boolean;
skinTone?: SkinTones;
disableAutoFocus?: boolean;
disableSearchBar?: boolean;
disableSkinTonePicker?: boolean;
}
🚨 You need to enable Continuous Integration on all branches of this repository. 🚨
To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.
Since we did not receive a CI status on the greenkeeper/initial
branch, we assume that you still need to configure it.
If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/
.
We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.
Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial
branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.
How can i set event.preventDefault to onEmojiClick callback?
Make Emoiji Groups labels properties for internationalization purposes: ["smileys & people","animals & nature","food & drink","travel & places","activities","objects","symbols","flags"]
ex: travelAndPlaces: "Lugares e Viagens"
To Improve user experience on some applications, the emoji picker needs to be closed when it loses its focus, it can be an opt in feature though... If this already exist please let me know or i can work on this as well.
devDependency
enzyme was updated from 3.9.0
to 3.10.0
.devDependency
enzyme-adapter-react-16 was updated from 1.14.0
to 1.15.0
.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.
enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
devDependency
enzyme was updated from 3.9.0
to 3.10.0
.devDependency
enzyme-adapter-react-16 was updated from 1.15.0
to 1.15.1
.This version is covered by your current version range and after updating it in your project the build failed.
This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.
enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
Parent component:
const [value, setValue] = useState();
...
const someAction = () => {
setValue(123)
}
const emojiHandle = () => {
console.log(value) //display undefined
}
...
...
return(
...
<Emoji callback={handleEmojiChange} /> // -> child component : onEmojiClick={callback}
<button onClick={someAction}>Press me 1st</button>
)
So, problem is that State is undefined on child component callback.
Reproduction:
Press the button to set state.
Then press on any Emojy to execute callback from parent component and display state.
Callback will show undefined state, which you already set when you press the button.
How to get access to state?
Is there a way to get the emoji by a given unified code? I can't store the emoji itself, but the unified code i do.
7.13.0
to 7.14.0
.This version is covered by your current version range and after updating it in your project the build failed.
eslint-plugin-react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
jsx-curly-newline
rule (#1493 @golopot)prop-types
(#296 #1422 @golopot)prop-types
and no-unused-prop-types
(#442 #833 #1002 #1116 #1257 #1764 @golopot)checkFragmentShorthand
option to jsx-key
(#2316 @kaykayehnn)no-did-mount-set-state
and no-did-update-set-state
to handle cDU and cDM defined as class properties (#1595 @jaaberg)sort-prop-types
cash when a shape PropType is defined in a variable (#1749 @alexzherdev)no-unused-state
false positive when using state of non-lifecycle method (#2274 @golopot)static-property-placement
false positive when accessing static property inside method (#2283 @dmason30)prop-type
detection for annotated props with default value (#2298 @yannickcr)no-render-return-value
performance (#2259 @golopot)jsx-sort-props
to report errors only on the identifier (#2312 @MrHen)The new version differs by 68 commits.
dfaa92f
Update CHANGELOG and bump version
c52b61b
Merge pull request #2316 from kaykayehnn/jsx-key-fragments
8db631b
[Fix] Fix detection of annotated props with default value
bbebefd
[Tests] Remove AppVeyor
0d49f5a
[New] Add ESLint ^6.0.0 as valid peerDependency
0364ed2
Fix formatting issues
7c1abed
Add checkFragmentShorthand option
ed04c2f
Fix tests in eslint < 5
0d1aaf8
Handle fragments in jsx-key
7d449a9
[New] jsx-sort-props
: Change reported range to only the identifier
1e102f0
Change reported range to only the identifier
e6b4c33
Merge pull request #2301 from golopot/fix-cached-props-2
9a63e19
Immediately destructure out propVariables rather than using it as a namespace
3a1a0d1
Apply suggestion: replace mutation with Object.assign
89b8143
Apply suggestion: replace concat([a]) with concat(a)
There are 68 commits in total.
See the full diff
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
I'm using emoji-picker-react together with emoji-js in a project and I want to put the emoji images on a CDN. I am having issues however, since images are missing.
Emoji 🏃 for example. When I inspect the image URL in the picker it is the following URL:
https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/1f3c3.png
(which exists)
The parser (emoji-js) however generates the following URL:
https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/1f3c3-200d-2642-fe0f.png
(which does not exist)
I am using the following version:
"emoji-js": "^3.4.1",
"emoji-picker-react": "^2.1.1",
The proptype for preload
should be .bool
as in the current github version instead of boolean
in the published version.
EmojiPicker.propTypes = {
...
preload: PropTypes.boolean
};
I wanted to use this fantastic picker in my project, but I can't because of the license.
There is any reason to be unlicensed?
Hello,
I written typescript declaration file for my own project. It can help to people:
emoji-picker-react.d.ts
declare module 'emoji-picker-react' {
import React from "react";
export const SKIN_TONE_NEUTRAL = 'neutral';
export const SKIN_TONE_LIGHT = '1f3fb';
export const SKIN_TONE_MEDIUM_LIGHT = '1f3fc';
export const SKIN_TONE_MEDIUM = '1f3fe';
export const SKIN_TONE_MEDIUM_DARK = '1f3ff';
export const SKIN_TONE_DARK = '1f3fd';
export interface IEmojiData {
unified: string,
originalUnified: string,
names: Array<string>,
emoji: string,
activeSkinTone: string
}
export interface IEmojiPickerProps {
onEmojiClick: Function,
emojiUrl?: string,
preload?: boolean,
skinTone?: SKIN_TONE_NEUTRAL | SKIN_TONE_LIGHT | SKIN_TONE_MEDIUM_LIGHT | SKIN_TONE_MEDIUM | SKIN_TONE_MEDIUM_DARK | SKIN_TONE_DARK
}
const EmojiPicker: React.FC<IEmojiPickerProps> = (props: IEmojiPickerProps) => {};
export default EmojiPicker;
}
15.6.2
to 15.7.0
.This version is covered by your current version range and after updating it in your project the build failed.
prop-types is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
I went to check the impact of adding this as a dependency to my app using bundlephobia. It reported that react was not listed as a dependency or peerDependency so could not complete the request.
For something like this I would consider adding react as peerDependency
is thing something you are willing to do? I am happy to make a PR if so.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.