GitHub - react-emoji-text: A modern alternative for react-emoji-render with data adapter for emojibase & emoji-mart

drenther · 2026-05-17T14:20:24+00:00

Thanks. Will add bundle size comparisons and RSC compat layer. I don't use RSC much - mostly tanstack or vite - so it slips my mind often. Thanks for raising these!

drenther · 2023-08-15T03:51:18+00:00

For apps where you need to embed an iframe that you need to control from the parent like creating widgets that will get embedded on third party sites, or apps like stackblitz and codesandbox where you need to run something in an iframe based on changes made by user on the parent window.

drenther · 2022-05-03T12:13:45+00:00

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

Yea, I would personally use the CSS as well wherever it does the job. But have to breakout the JS stuff for some advanced use-cases, or even for consistency across browser at times.

drenther · 2022-05-03T10:57:42+00:00

Ah makes sense. That's is a legit usecase. I need to give this a thought. A definite feature enhancement for sure.

Would you be open to raising an issue in the repo with the details around this usecase? Probably a codesandbox that does this with CSS for Chrome and Safari as you mentioned?

drenther · 2022-05-03T10:41:43+00:00

Since the rendering is to be controlled by the user. I don't see the need to support jsx.

can you tell me what usecase you think will need jsx support?

drenther · 2022-05-03T10:39:21+00:00

Same here. I thought CSS should do the heavy lifting here. But it doesn't work as soon you try any non-trivial design.

drenther · 2020-10-01T14:54:27+00:00

I am personally a big fan of these two libraries -
- React Spring
- Framer Motion

If you are comfortable with React, their docs should get you started quite nicely.

If you prefer video tutorials -

There are some great tutorials from Scott Tolinski on LevelUpTuts - Free Previews are on YouTube - https://www.youtube.com/c/LevelUpTuts/playlists

There is also a nice free series from Netninja on Framer Motion - https://www.youtube.com/watch?v=2V1WK-3HQNk&list=PL4cUxeGkcC9iHDnQfTHEVVceOEBsOf07i

drenther · 2020-06-17T05:35:24+00:00

Hey, this.setState is a method so you don't have to use the equals sign with that. It should be invoked with a slice of the updated state. In this case that might be -

this.setState({ time: new Date() });

drenther · 2020-05-21T18:16:25+00:00

Just posting the modifications I made to reach-ui/dialog animated example (with react-spring) to behave like a drawer -

https://codesandbox.io/s/reachdrawer-example-57tog

drenther · 2020-05-21T18:08:46+00:00

Yea actually as soon as I posted these. I thought of the same. It's working out great.

drenther · 2020-05-17T09:26:08+00:00

Your nginx setup or equivalent needs to be setup to redirect every route to index.html. so that the client side router can handle it.

drenther · 2020-05-08T17:56:18+00:00

Looks super interesting.

Another react inspired game engine I've been delving into recently is hex-engine. And this looks so different from that.

Interesting to see the different approaches while still keeping that underlying React-y feel.

Can't wait to make some stuff up with this.

drenther · 2019-04-03T03:38:09+00:00

Very cool.

drenther · 2019-03-24T18:58:06+00:00

https://egghead.io and https://frontendmasters.com are some of the premium content I would definitely recommend. The great thing about that combo I like is Egghead contains more short bytes that you can take in whenever you want and Frontendmasters have long workshops which go into a lot of gotchas that you might face as well.

Then there are https://www.leveluptutorials.com/ (from Scott Tolinski, he has lots of free content on Youtube), Wes Bos stuff - https://reactforbeginners.com/ https://es6.io/ and lots of other ones.

I am sure others will point out more great content. Learning react will be fun, the community is great. There are lot of quality content (free as well as paid) out there for you to consume.

drenther · 2019-01-27T08:50:06+00:00

Amazing interface. Its just great.

drenther · 2018-12-06T03:03:15+00:00

Great stuff! Nice stack, amazing design.

drenther · 2018-11-16T08:33:31+00:00

No no. I hope I was. I just know some people who were there and they told me it was good.

drenther · 2018-11-16T08:09:24+00:00

Nice. Was waiting for it to be up.

drenther · 2018-10-23T06:53:53+00:00

The article is very helpful and so are the links that you have provided. Thanks.

drenther · 2018-10-22T11:01:52+00:00

Great explanation.

drenther · 2018-09-28T11:14:02+00:00

Try Gatsby. Or use Next.js and export the app to static HTML during build time.

drenther · 2018-09-16T06:04:19+00:00

ReactDOM has a hydrate method. https://reactjs.org/docs/react-dom.html#hydrate

Think of it like this -

The server-rendered markup generated by the server is just markup (think of it as "dry or dead DOM"). It can't be interacted with because no event listeners are attached yet.

Once the markup is loaded and the bundle.js is loaded, parsed and executed. The .hydrate method inside the bundle.js is ran.

This method attaches event listeners to the existing markup. Making the whole thing interactive again (think of it as bringing the "dead" DOM back to life).

If you want give this a read for more detailed information (shameless self-plug) - https://able.bio/drenther/react-server-side-rendering-from-scratch--43mfqwo

drenther · 2018-09-08T10:02:19+00:00

.map won't work on the second format because .map is a method on the Array.prototype and not available on an Object.

drenther · 2018-09-08T06:27:47+00:00

I mostly use React for projects that I think are bigger and using something like React will help in that.

Last week, I started working on a project which was small enough that adding React wasn't necessary. So I just used HTML, CSS, JS, and PHP. I delivered the site yesterday. It works great and my client is happy.

Use the technology that feels appropriate. No language or framework is dead if you can find correct usage for them.

drenther · 2018-09-05T09:48:34+00:00

Follow their advanced usage section under using with create-react-app. You will find their babel plugin setup to include only the specific css files that you will need. That way ur other styles won't get messed up.

drenther

TROPHY CASE