Render HTML-marked text Received from Server

Yukiya Nakagawa — Wed, 19 Feb 2020 02:18:48 +0000

Sometimes we need to render HTML-marked strings from server, with React. However, React can usually only render UI written in JSX or createElement.

So, let's use unusual methods. I have two ideas💡.

Use dangerouslySetInnerHTML 🚨
Use RegExp and Split

Use `dangerouslySetInnerHTML` 🚨

This is easy but VERY DANGEROUS method (as the documentation says).

const marked = "This sentense has <b>a bold text</b> and <b>another one</b>.";

return <div dangerouslySetInnerHTML={{ __html: marked }} />;

Okey, run it.

Great!😈

But, but, this method carries a significant risk🧨 against XSS attacks.

Use RegExp and Split

As a safe way, split the string and re-markup it.

Here is the sample.

const BoldableText = ({ text }) => {
  // shortest match for marked text with <b> tag
  const re1 = /<b>(.+?)<\/b>/g;
  // for removing tags included in the string matched by re1
  const re2 = /<b>(.+)<\/b>/;

  // strings to re-markup with JSX
  const matched = text
    .match(re1) // ["<b>a bold text<b>", "<b>another one</b>"]
    .map(s => s.match(re2)[1]); // ["a bold text", "another one"]

  // split strings to re-markup
  const texts = text.split(re1); // ["This sentense has ", "a bold text", " and", ...]

  const markedJsx = texts.map((s, index) => {
    if (index === 0 || index === texts.length - 1) {
      // first and last item is not the target to re-markup
      // because "<b>foo bar</b> buz..." generates ["", "foo bar", " buz"...]
      return s;
    }

    if (matched.includes(s)) {
      return <b key={s}>{s}</b>; // re-markup!!
    }

    return s;
  });

  return markedJsx;
};

And use it as below.

const marked = "This sentense has <b>a bold text</b> and <b>another one</b>.";

return <BoldableText text={marked} />;

Okey, run it.

I did it!!!🎉🎉🎉🎉🎉

Memo

Do I really have to use two regular expressions?
How about nested tags?
rehype-react is more easy way? (thx @_sunnyone)

Handle keyboard event with React Hooks

Yukiya Nakagawa — Tue, 21 Jan 2020 11:48:07 +0000

Sometimes you want to implement keyboard shortcuts. This is a sample for React Hooks.

useEffect(() => {
  // handler object
  const handleEvent = (ev: KeyboardEvent) => {
    console.log(`your key is ${ev.code}!`);
  };

  // register handler
  // do not use lambda here because to unsubscribe later
  window.addEventListener('keyup', handleEvent);

  // unregister handler
  return () => {
    window.removeEventListener('keyup', handleEvent);
  };
}, [/* any deps */]);

Then, handleEvent handles your keyevent.

Forem: Yukiya Nakagawa

Render HTML-marked text Received from Server

Use dangerouslySetInnerHTML 🚨

Use RegExp and Split

Memo

Handle keyboard event with React Hooks

Use `dangerouslySetInnerHTML` 🚨