Comments (7)
it would be great if the emojione settings could be passed in as props. I ended up forking the repo and setting the following options for emojione:
emojione.imageType = 'svg';
emojione.sprites = true;
emojione.imagePathSVGSprites = '';
then in the component where I render the emoji-picker I loaded the svg inline:
<div style={{display: 'none'}}>
{require('emojione/assets/sprites/emojione.sprites.svg')}
</div>
using the an inline loader for SVG:
dangerouslySetInnerHTML.loader.js
found here:
module.exports = function(content) {
return (
'module.exports = require("react").createElement("span", {' +
'dangerouslySetInnerHTML: {' +
'__html: ' + JSON.stringify(content) +
'}' +
'});'
);
};
found here: http://stackoverflow.com/questions/30844298/how-do-i-load-svgs-directly-in-my-react-component-using-webpack
this saves all HTTP requests as the sprite gets bundled with the rest of the app.
I was going to do a PR, but it went off too early. I can still make a PR, if people are interested.
from emojione-picker.
Hey Ron, looks great!
Do you see any downside to me enabling these options by default?
On Thu, Mar 3, 2016 at 7:06 AM Ron Hornbaker [email protected]
wrote:
By default emojione loads a small png for each emoji, but there's a
spritesheet option that loads only one image then renders via
background-position for each emoji.It's simple to turn it on. Just add these two lines of js before rendering
the Picker:emojione.imageType = 'png';
emojione.sprites = true;Hope this helps someone. Awesome little component here, @tommoor
https://github.com/tommoor, thank you! Here's a screenshot of my (not
yet public) implementation which is going on a dark background:[image: image]
https://cloud.githubusercontent.com/assets/774647/13498271/dbda3618-e11e-11e5-8c4f-7866ad628c19.png—
Reply to this email directly or view it on GitHub
#13.
from emojione-picker.
Hi Tom,
I don't know of any downside to defaulting to sprites. Emojione should default to sprites imo. Having a client make several hundred unnecessary http requests is never a good thing.
You'll need to make several stylesheet changes to get them sized and lining up properly in your picker, however. I'll send you my css soon.
-Ron
On Mar 3, 2016, at 10:19 AM, Tom Moor [email protected] wrote:
Hey Ron, looks great!
Do you see any downside to me enabling these options by default?
On Thu, Mar 3, 2016 at 7:06 AM Ron Hornbaker [email protected]
wrote:By default emojione loads a small png for each emoji, but there's a
spritesheet option that loads only one image then renders via
background-position for each emoji.It's simple to turn it on. Just add these two lines of js before rendering
the Picker:emojione.imageType = 'png';
emojione.sprites = true;Hope this helps someone. Awesome little component here, @tommoor
https://github.com/tommoor, thank you! Here's a screenshot of my (not
yet public) implementation which is going on a dark background:[image: image]
https://cloud.githubusercontent.com/assets/774647/13498271/dbda3618-e11e-11e5-8c4f-7866ad628c19.png—
Reply to this email directly or view it on GitHub
#13.—
Reply to this email directly or view it on GitHub.
from emojione-picker.
Here's my css: https://gist.github.com/ronhornbaker/1d6695a318b7febb2f6e
Note: I'm not sure how it will look with search disabled, as I don't use that option. Will probably be just blank space in the header.
from emojione-picker.
Hi guys, I'm kinda lost here, where should I add these two lines to avoid the hunders png loading? thanks for the help! this is an awesome component
from emojione-picker.
It should work if you add the lines right after your import statements for emojione.
I had to fork the repo:
https://github.com/DecodedCo/emojione-picker
Here's the lines I added (in this and another file)
https://github.com/DecodedCo/emojione-picker/blob/master/src/picker.jsx#L9-11
from emojione-picker.
Make sure you have the SVG inline somewhere.
And be aware this is going to add 4.6MB to your bundle size. So you'll probably want to split it out into it's own webpack bundle.
from emojione-picker.
Related Issues (20)
- Is something wrong with styles? HOT 3
- Is it available for HTML/CSS/JavaScript web page ? HOT 2
- Use PureComponent instead of shallowCompare HOT 1
- Erro while starting HOT 1
- Load only emoji's of particular category when that category is clicked HOT 1
- `npm start` is broken HOT 1
- The images take some time before being displayed after a scroll event HOT 2
- can i use this on angular2? its kinda cool :) HOT 1
- Search does not search shortnames HOT 1
- Upgrade react-virtualized to the latest HOT 1
- Support Content Security Policy HOT 3
- Update to EmojiOne 3 HOT 2
- Sailfish OS browser doesn't support .includes? HOT 3
- Using supplied CSS
- Chrome on Ubuntu, the modifiers don't work HOT 3
- Warnings in react 15.6 HOT 2
- A sudden error HOT 1
- Next major version release
- Publish to npm
- cannot use emojione-picker after install from npm HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from emojione-picker.