Skip to main content

React Snippets ↔ useful React custom hooks/patterns

aka Snippet

<RequireAuth>​

custom FC Wrapper to Declaratively control Protected Route via useAuth() & <Navigate\> from react-router-dom

useActions()

!snippet Hello World direct from html file

<!DOCTYPE html\>
<html\>
  <head\>
    <script src="//unpkg.com/react@17/umd/react.development.js"\></script\>
    <script src="//unpkg.com/react-dom@17/umd/react-dom.development.js"\></script\>
  </head\>
  <body\>
    <div id="root"\></div\>
    <script type="text/javascript"\>
      const reactElement = React.createElement("h1", null, "Hello World");
      const domNode = document.querySelector("#root");
      ReactDOM.render(reactElement, domNode);
    </script\>
  </body\>
</html\>

reactElement

instance of React h1 component element

Discord-style button​

react-icons for svg. tailwindcss styles

References​