As I’ve been using Styled Components (SC hereafter) and been wondering about the magic behind it.
At the end of article, Max finished the article with following sentence.
I’m very excited to see what other use cases for tagged template literals people come up with!
So I created dangerous, a tagged template literal function, which accepts a dangerous text (such as malicious user input) and sets inner HTML of a component in SC like style.
I will skip on what tagged template literal is or how it works as Max hasexplained quite well.
When you pass a string to component, they are encoded to prevent malicious user input/scripts.
React team has made it hard to set
innerHTML of a component to help developers accidentally set malicious string to prevent XSS attacks.
dangerous makes it easy to set an
innerHTML value and returns a component with the unsafe HTML string.
As you can with SC, you can pass a component or an HTML tag to the
dangerous like or even wrap SC component and vice versa.
Alert will show on CodeSandbox only
So if you need to style the dangerous component, either pass a SC component or wrap the dangerous component in SC component.
I will be frank. It’s quite useless in practice and promotes bad behavior.
It was mostly an academic project to learn how tagged template literal works & get used to TypeScript.
And a plan to migrate to TypeScript for React, and learn how to test it.
Like a kid with FOMO
- Trying to do/learn too many things at once (TypeScript, tagged template literal, CircleCI, etc) really made it worse.
- I’ve given up on writing tests in the prev v1.0 release (currently it’s at 0.1.x).
So the easy way out was to use RollUp, which I’ve used before.
But with TypeScript in play, it was harder as TypeScript has its own transpiler.
I also ended up bloating up the library size and had to learn how to fix it.
Fixed by marking react methods as external dependencies in tsconfig.
I remember making the same mistake while first learning React, trying to learn Redux, Node, Express, and all other related technologies all at once and got no where after shaving the yak for months.
But learning from these failures (try to use Rollup for simple libraries, don’t use new language [typescript] without understanding how it works first, etc) was a great lesson.
Frankly speaking, I’ve never had much need to use dangerouslySetInnerHTML at all.
Please don’t hesitate to give me any feedback (good or harsh, both are welcome) or changes required.
- The magic behind styled-components
- Template literals on MDN
- Styled Components