Top React Libraries — Editor, Translation, and Code Splitting

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

draft-js

Draft.js is a package that lets us add a rich text editor to our React app.

We can install it by running:

npm i draft-js

Then we can use it by writing:

import React from "react";
import { Editor, EditorState } from "draft-js";

export default function App() {
  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );

  const editor = React.useRef(null);

  function focusEditor() {
    editor.current.focus();
  }

  React.useEffect(() => {
    focusEditor();
  }, []);

  return (
    <div onClick={focusEditor}>
      <Editor
        ref={editor}
        editorState={editorState}
        onChange={editorState => setEditorState(editorState)}
      />
    </div>
  );
}

We added the Editor component to add the rich text editor.

It will have nothing but a cursor displayed to let us enter text.

We use the setEditorState function to set the editor’s state as we type.

react-i18next

The react-i18next package lets us add translations to our React app.

To install it, we run:

npm i react-i18next i18next-browser-languagedetector react-i18next

Then we can use it by writing:

import React from "react";
import i18n from "i18next";
import { useTranslation, Trans } from "react-i18next";

import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    // we init with resources
    resources: {
      en: {
        translations: {
          "To get started, edit <1>src/App.js</1> and save to reload.":
            "To get started, edit <1>src/App.js</1> and save to reload.",
          "Welcome to React": "Welcome to React and react-i18next",
          welcome: "Hello <br/> <strong>World</strong>"
        }
      },
      de: {
        translations: {
          "To get started, edit <1>src/App.js</1> and save to reload.":
            "Starte in dem du, <1>src/App.js</1> editierst und speicherst.",
          "Welcome to React": "Willkommen bei React und react-i18next"
        }
      }
    },
    fallbackLng: "en",
    debug: true,
    ns: ["translations"],
    defaultNS: "translations",
    keySeparator: false,
    interpolation: {
      escapeValue: false
    }
  });

export default function App() {
  const { t, i18n } = useTranslation();

  const changeLanguage = lng => {
    i18n.changeLanguage(lng);
  };

  const index = 11;

  return (
    <div className="App">
      <div className="App-header">
        <h2>{t("Welcome to React")}</h2>
        <button onClick={() => changeLanguage("de")}>de</button>
        <button onClick={() => changeLanguage("en")}>en</button>
      </div>
      <div className="App-intro">
        <Trans>
          To get started, edit <code>src/App.js</code> and save to reload.
        </Trans>
        <Trans i18nKey="welcome">trans</Trans>
        <Trans>{index + 1}</Trans>
      </div>
    </div>
  );
}

We added the translations in the init method.

Also, we set the fallback language to English with the fallbackLng option.

ns sets the namespace for translation.

defaultNS is the default namespace.

interpolation has interpolation options.

escapeValue escapes the values when set to true .

Then in App , we have the changeLanguage function to change the language with the i18n.changeLanguage method call.

Finally, we have the Trans component to add the translation.

react-loadable

react-loadable is a package that lets us add code splitting to our app.

To install it, we run:

npm i react-loadable

Then we can use it by writing:

Foo.js

import React from "react";

export default () => {
  return <div>foo</div>;
};

App.js

import React from "react";
import Loadable from "react-loadable";

const LoadableComponent = Loadable({
  loader: () => import("./Foo"),
  loading: () => <p>loading</p>
});

export default function App() {
  return <LoadableComponent />;
}

We have a Foo component to display something.

Then in App.js , we created the LoadableComponent by importing the Foo component from Foo.js .

The loading property has a component to display when Foo.js is loading.

And then we can use LoadableComponent in App .

Conclusion

draft-js lets us create a customizable text editor.

react-loadable lets us do code splitting by dynamically loading components.

react-i18next is a package for adding translations in our app.