Skip to content

Commit

Permalink
Add FAQ entry about HTML entities
Browse files Browse the repository at this point in the history
Closes #413
  • Loading branch information
Deraen committed Aug 19, 2020
1 parent 1990484 commit 17d69c3
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 1 deletion.
22 changes: 22 additions & 0 deletions doc/FAQ/HtmlEntities.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# Using HTML entities

React will escape HTML entities (like ` `, `×`) in the text elements.

You could just use literal character: `×` or unicode code, which is converted to
the character by Cljs compiler: `\u00D7`.

HTML entities work in React JSX because JSX will unescape the entity code to
literal character.

You can do the same in ClojureScript by using `goog.string/unescapeEntities`:

```cljs
(ns example
(:require [goog.string :as gstr]))

(defn comp []
[:h1 "Foo" (gstr/unescapeEntities "×")])
```

Note: Yes, this can be inconvenient, but Reagent can't do this automatically as
finding and replacing entities during runtime would be slow.
1 change: 1 addition & 0 deletions doc/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ Also:
4. [How can I use React's dangerouslySetInnerHTML?](FAQ/dangerouslySetInnerHTML.md)
5. [Reagent doesn't work after updating dependencies](FAQ/CljsjsReactProblems.md)
5. [How do I force Component re-creation?](FAQ/ForcingComponentRecreation.md)
5. [Using HTML entities](FAQ/HtmlEntities.md)
6. [How do I access "props" in lifecycle methods?](http://nils-blum-oeste.net/clojurescripts-reagent-using-props-in-lifecycle-hooks/) (external link)

## Examples
Expand Down
3 changes: 2 additions & 1 deletion doc/cljdoc.edn
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
["Why is my attribute (like autoFocus) missing?" {:file "doc/FAQ/MyAttributesAreMissing.md"}]
["How can I use React's dangerouslySetInnerHTML?" {:file "doc/FAQ/dangerouslySetInnerHTML.md"}]
["Reagent doesn't work after updating dependencies" {:file "doc/FAQ/CljsjsReactProblems.md"}]
["How do I force Component re-creation?" {:file "doc/FAQ/ForcingComponentRecreation.md"}]]
["How do I force Component re-creation?" {:file "doc/FAQ/ForcingComponentRecreation.md"}]
["Using HTML entities" {:file "doc/FAQ/HtmlEntities.md"}]]
["Examples" {}
["Material-UI v1" {:file "doc/examples/material-ui.md"}]]
["Other" {}
Expand Down

0 comments on commit 17d69c3

Please sign in to comment.