flatlogic / react-material-admin

☄️React Material Admin is a React template built with Material-UI

React Material Admin — Material-UI Dashboard Template

Built with React, Material-UI, React Router. No jQuery and Bootstrap!

This version uses React 16.14.0, React Router v5, MaterialUI v4, built with React Hooks and React Context (No Redux)

The React Material Admin template demonstrates a modern approach to dashboard design. React 16.14.0, React Router v5, and MaterialUI v4, built using React Hooks and React Context (eschewing Redux), provide a streamlined, contemporary foundation for developing business software dashboards.

View Demo | Download | More templates | Support forum

Full Version

This is a limited version of Full React Material Admin with more components, pages and theme support.

Features

• React (16.14.0)
• React Hooks
• React Context
• No jQuery and Bootstrap!
• Mobile friendly layout (responsive)
• Create-react-app under the hood
• React Router v5
• Material-UI v4
• Modular Architecture
• CSS-in-JS styles
• Webpack build
• Stylish, clean, responsive layout
• Authentication

Pages

We have implemented some basic pages, so you can see our template in action.

• Dashboard
• Typography
• Tables
• Notifications
• Charts
• Icons
• Maps
• Login
• Error

Quick Start

1. Get the latest version

You can start by cloning the latest version of React Dashboard on your local machine by running:

$ git clone https://github.com/flatlogic/react-material-admin.git MyApp
$ cd MyApp

2. Run yarn install

This will install both run-time project dependencies and developer tools listed in package.json file.

3. Run yarn start

Runs the app in the development mode.

Open http://localhost:3000 to view it in the browser. Whenever you modify any of the source files inside the /src folder, the module bundler (Webpack) will recompile the app on the fly and refresh all the connected browsers.

4. Run yarn build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

Support

For any additional information please go to our support forum and raise your questions or feedback provide there. We highly appreciate your participation!

How can I support developers?

• Star our GitHub repo ⭐
• Tweet about it.
• Create pull requests, submit bugs, suggest new features or documentation updates 🔧
• Follow @flatlogic on Twitter.
• Subscribe to Flatlogic newsletter at flatlogic.com
• Like our page on Facebook 👍

More from Flatlogic

• React Native Starter - 🚀 A powerful react native starter template that bootstraps development of your mobile application
• Sing App - 💥 Free and open-source admin dashboard template built with Bootstrap 4
• Awesome Bootstrap Checkboxes & Radios - ✅ Pure css way to make inputs look prettier
• React Dashboard - 🔥 React Dashboard - isomorphic admin dashboard template with GraphQL
• Light Blue Dashboard - 💦 Free and open-source admin dashboard template built with Bootstrap

Premium themes

Looking for premium themes and templates? Check out more admin dashboard templates at flatlogic.com.

License

MIT.

react-material-admin's Issues

example loading data from server

I guess redux is not part of this UI (which is fine) but do you have some best practice suggestions to load data from a server?

RTL

hi
How to make the admin panel Right to Left direction ?

Form layouts

Please add layouts / examples because any back office app uses Forms.

Thanks!

Review

Hi guys, thank you for sharing this theme!

I have taken the time to look at the implementation, you can find my feedback in the following list:

• mui-datatables I was chatting with the author of this dependency, maybe you should consider material-table. We have started to promote them: https://next.material-ui.com/demos/tables/#material-table.
• recompose this package was soft deprecated. With the growing React hooks trend, it will soon no longer be needed.
• We have solved a lot of issue in Material-UI v4. The beta version starts to be a good shape. You can consider upgrading. I hope it will solve the pain points you faced.
• In v4, tree sharing work, if you upgrade, you can do without the bundle size increase:

-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
+import { IconButton, Typography } from '@material-ui/core';

• tinycolor2 if you want to minimize bundle size, Material-UI has a colorManipular.js module. It's kind of private but we want to provide an official solution, we have expored using polished last week, we didn't move forward for bundle size concern.
• It's the first time I see the package.json in each folder approach, interesting.
• Did you consider using Prettier?
• You might want to set the component prop when using the Typography component to get the correct HTML semantic headline. e.g.

-<Typography component="span" variant="h5" color="primary" className={classes.textRow}>Oops. Looks like the page you're looking for no longer exists</Typography>
+<Typography variant="h5" color="primary" className={classes.textRow}>Oops. Looks like the page you're looking for no longer exists</Typography>

• <Tab label="Login" classes={{ root: classes.tab }} /> I would probably just use the classsName, it's more idiomatic.

I hope it helps :)

Could you share an eslint config used in this project?

component .scss files are not taking precedence over .css file imported in index.js file

I installed node-sass and then bootstrap and imported bootstrap.css file in index.js file. Now I have a component which is importing it's own .scss file in it, which overrides some bootstrap classes. but the override is not working, when i inspected i found that the bootstrap's <style> comes after the component's <style> in the chrome's dev inspector.

As per the docs of create-react-app the component's .css/.scss should take the precedence over the .css imported in index.js file.

Calling external API for login

This is a question not an issue :)

I like the design patterns and code structure of this admin dash board ( Using React Context, React Hooks, Material UI Theme modification and lot more ). I want to follow the project coding structure as much as I can.

I started to call APIs in this dash board and add hook base fetch approach ( I used SWR) .

First place to call API login functionality.

So, I have add API call to the UserContext.js file and changed loginUser function.

function loginUser(dispatch, login, password, history, setIsLoading, setError) { 
....useSWR('/api/login'); ...

But I face the error:

React Hook "useSWR" is called in function "loginUser" which is neither a React
function component or a custom React Hook function react-hooks/rules-of-hooks

If I want to have a correct design pattern, how can I fix it. The "loginUser" seemed the best place for calling login APIs but it seems that I can not put it here.

Thanks 😀

npm install error

Hi, I am getting npm install errors.

Error: Unexpected end of JSON input while parsing near '...Pkk8OU+8JJQhOT\nWDXdg'

What could be the reason?

Beautiful UI and awsome job

I do have a quick question. When I try to run and test the UI myself, I got the warning.

Warning: React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead.

I don't see anywhere in the codebase that has createFactory(). Do you know where that might be?

And seems like the library recharts has many warnings

Sign up form errors

1. Email address is incorrectly spelt

2. Full name input field has a `type="email"` rather than `type="text"`

UserContext may call a warning

in function loginUser if you write like this

if (!!username && !!password) {
    setTimeout(() => {
      localStorage.setItem('id_token', 1)
      dispatch({ type: 'LOGIN_SUCCESS' })
      setError(null)
      setIsLoading(false)

      histroy.push('/app/dashboard')
    }, 2000)
}

may call a warning likes Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

but write like this

if (!!username && !!password) {
    setTimeout(() => {
      localStorage.setItem('id_token', 1)
      setError(null)
      setIsLoading(false)
      dispatch({ type: 'LOGIN_SUCCESS' })
    
      histroy.push('/app/dashboard')
    }, 2000)

it will not.

Material UI 5

Hello, are you planning to upgrade the material ui version to 5?

Images on Tables

Can we display images on the tables. If yes,can anyone tell me how to do it?It will be a great help.

react admin

Custom Dot color ignored

The Dot component will only show named colors in the palette although I believe the intent is to support rgb values as well.
To see the issue, in the Dashboard page, set one of the Dot colors to an rgb value
<Dot color="#990000" />
The Dot will appear grey (the default color).

The code in Dot that sets the color tries to set the "most appropriate" value
backgroundColor: color && theme.palette[color] && theme.palette[color].main,
But if color has a non-null value this will always evaluate the second element and this may return null.
Suggest to first check for the theme color and if null then use the color value
backgroundColor: (theme.palette[color] && theme.palette[color].main) || color,

Errors on installing....

{
        "@babel/plugin-proposal-class-properties": "^7.4.4",
        "@babel/preset-react": "^7.0.0",
        "@material-ui/core": "^3.9.2",
        "@material-ui/icons": "^3.0.2",
        "apexcharts": "^3.6.3",
        "axios": "^0.18",
        "classnames": "^2.2.6",
        "cross-env": "^5.1",
        "font-awesome": "4.7.0",
        "laravel-mix": "^4.0.7",
        "line-awesome": "icons8/line-awesome",
        "lodash": "^4.17.5",
        "mui-datatables": "^2.0.0-beta.58",
        "popper.js": "^1.12",
        "react": "^16.8.2",
        "react-apexcharts": "^1.3.0",
        "react-dom": "^16.8.2",
        "react-google-maps": "^9.4.5",
        "react-redux": "^6.0.1",
        "react-router": "^4.3.1",
        "react-router-dom": "^4.3.1",
        "react-scripts": "2.1.5",
        "react-syntax-highlighter": "^10.2.0",
        "react-toastify": "^4.5.2",
        "recharts": "^1.5.0",
        "recompose": "^0.30.0",
        "redux": "^4.0.1",
        "redux-thunk": "^2.3.0",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "tinycolor2": "^1.4.1"
}

Reduce dependencies

The amount of total dependencies in this project is astronomical, latest yarn install pulled 60,000 packages with a 400MB node_modules folder

Dot component style not being applied

Apparently, the dotSmall style is never being created to begin with in the <Dot /> component.

Works as it is though

nvm dumb

yarn install
yarn install v1.21.1
error An unexpected error occurred: "E:\Dev\WebMap\package.json: Unexpected token p in JSON at position 1".
info If you think this is a bug, please open a bug report with the information provided in "E:\Dev\WebMap\geowebappreact\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Error: useLayoutState must be used within a LayoutProvider

Problem In UserContext -> loginUser function

As we know,
In Login file, using React userState hook for controll and display UI in view

But in page, we using loginUser function, from UserContext

This function using 6 parameter userDispatch, loginValue, passwordValue, props.history, setIsLoading, setError
Some of this is arror function to change some state in Login Component

But I think a problem in it:
In "loginUser" function store in UserContext file
When call loginUser => we make change some of that state (Ex: error, isLoading, userDispatch)
this make warning render, because this work maybe Asynchronous ;
so browser could not optimization for render
And if setError(true) (before setIsLoading(false); or dispatch()) in loginUser
this browser render will not display error messenger