JSMastery – React Admin Dashboard App With SyncFusion


React

Updated Jul 22nd, 2022

Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More

Overviews

Create-React-App. Used Syncfusion component library (free for individual developers and small businesses).

I like how not only is there a light and dark mode but a theme color option with six choices. Didn’t get too involved with persisting state on refresh but the idea is there.

Key Takeaways

Leveraged useState Hook for Global State Using Context API

He uses a global state context with “useState” hook instead of the “useReducer” hook. Actually creates a custom “useStateContext” hook. Pretty clean syntax.

export const useStateContext() = () => useContext(StateContext)

Syncfusion is Very Impressive

Kanban drag and drop component is cool. The WYSIWYG editor component is cool. Chart components are awesome! The Grid component has pagination, sort, excel export, edit/delete – Holy Moly! This example uses dummy data that isn’t updated in the database so is lost on page refresh but still. Syncfusion is enterprise level for sure.

Navigation Data in Separate file

Another instance of Using the NavLink menu data in a separate external file and mapping over is awesome.

Global Screen Size State

For mobile menu he stores the screen size state in global context and has two “useEffect” hooks in the navbar, one on first load and one watching screen size global state. 95 minute mark.

Theme Colors

Not just light and dark mode but theme colors using a Current-color variable is awesome. Maps through theme colors file to show button as colored circle and shows check mark icon on the current color via block or hidden.

He does save the “themeMode” and “colorMode” in local storage. Then in the main “App.js” file he checks these on initial render inside a useEffect. Unclear if this results in any flashing.

useEffect(() => {
    const currentThemeColor = localStorage.getItem('colorMode');
    const currentThemeMode = localStorage.getItem('themeMode');
    if (currentThemeColor && currentThemeMode) {
      setCurrentColor(currentThemeColor);
      setCurrentMode(currentThemeMode);
    }
  }, []);

Note: After visiting final project I don’t see any flashing and there is persistence on page refresh. Check it out here.

So you store the hexadecimal string in global context and this is what is referenced in the Syncfusion component prop. Note that this only works with inline styles or passing as prop to something able to accept it like a component library or styled component. You cannot reference a JS variable in plain CSS.

style={({isActive}) => ({
  backgroundColor: isActive ? currentColor : ""
})}

Interesting to see the global context used in the “App.js” file. Mostly for menu’s open and the color preferences.

He dynamically adds a class to the opening main div tag to activate the tailwind dark mode styles.

<div className={currentMode === "Dark" ? "dark" : ""}>