Crema React
v-3
Search…
⌃K

FAQ

For example, I want to remove the theme setting button from the default layout. First of all, I need to go to the src/@crema/core/AppLayout/DefaultLayout/index.js file, and to remove the customizer button, I need to remove <AppThemeSetting/> Tag.
In case you are using with the another layout go to the src/@crema/core/AppLayout/{LAYOUT}/index.js and remove the <AppThemeSetting/> Tag.
Yes, You can remove the menus from the left sidebar. but we suggest that it would be great if you use the starter_template of your desired version. In case you want to remove few menus from the template then you can follow the following steps
  1. 1.
    Go to the src/page/routesConfig.js file and remove the object that you don't want to use in your left sidebar. In nextjs version please modify the src/modules/routesConfig.js
  2. 2.
    Remove all unrelated routes from the src/page/index.js file. (Only for CRA)
  3. 3.
    Remove all unrelated files/directory from src/page/ directory. (Only for CRA)
  4. 4.
    If you are using nextjs version you need to remove from src/modules/ directory and routes from src/pages directory
We are using react-icons for the sidebar menu. you can check out these here: https://react-icons.github.io/react-icons/
There are few simple steps to move apps into a separate project.
  1. 1.
    Copy Mail folder into your project from apps
  2. 2.
    Add Mail app's route into your project and link it to your navigation(You can update base path 'apps/mail' to as your project need.)
  3. 3.
    Copy AppsContainer from the core components
  4. 4.
    Copy MailApp action and reducer file from the redux and link it to your app redux.
  5. 5.
    In case you want to use a fake API and database, please copy the DB file and mock API into your project(In case you want to integrate it with you API Please link your API to mail)
  6. 6.
    Please make sure you initialize APIs in your demo version.
If you are using CRA version then go to src/pages/auth/Signin/SigninFirebase.js and remove the initialValues. if you are using the nextjs version then you need to remove this from src/modules/auth/Signin/SigninFirebase.js. and follow the similar way for other type authentication.
src/modules/auth/Signin/SigninFirebase.js.
initialValues={{// remove this attribute of Formik
email: '[email protected]',
}}
If you are using the Nextjs Version of Crema. You should follow the same doc for the Nextjs version. You can check the nextjs doc here
If you are using the Typescript Version of Crema. You should follow the same doc for the TypeScript version. The folder structure and way of the code style are same for all versions of Crema.
To change the initial path you need to change the initialUrl in the src/shared/constants/AppConst.js
If you want to assign the dynamic url then you need to get the your url in the src/@crema/core/AppContentView/index.js file and assign it to fallbackPath.
<AppErrorBoundary>
{generateRoutes({
isAuthenticated: isAuthenticated,
userRole: user?.role,
unAuthorizedStructure:{
...unAuthorizedStructure,
fallbackPath: initialUrl, //Here is your current url goes
},
authorizedStructure,
anonymousStructure,
})}
</AppErrorBoundary>
To change the text of the menu you need to update the locale value to a particular messageId you need to follow the following steps to achieve that.
  • Copy your messageId. It's looks like this "sidebar.apps.wall" in below message
src/pages/routesConfig.tsx
messageId: "sidebar.apps.wall",
  • Search it in your locale file in the src/shared/localization/locales/{locale}.json file and replace it's value according to you.
src/shared/localization/locales/en_US.json
"sidebar.apps.wall": "Wall App",
To remove multilingual support from your app you need to follow the following steps. We suggest to you please start with the starter-kit of your desired version
  • You need to remove <AppLocaleProvider> tag from the src/App.tsx file
src/App.tsx
<AppLocaleProvider>// remove this
...
</AppLocaleProvider>
  • Remove the <IntelMessage> tag from the src/@crema/core/AppLayout/components/* directory like below.
src/@crema/core/AppLayout/components/VerticalNav/VerticalItem/index.tsx
// before
<ListItemText
className="nav-item-content"
primary={<IntlMessages id={item.messageId} />}
classes={{ primary: "nav-item-text" }}
/>
//after
<ListItemText
className="nav-item-content"
primary={item.title}
classes={{ primary: "nav-item-text" }}
/>
  • You need to do same process with all other file in this directory.
Crema use the default routing method in the nextjs. In this routing method page route is based on the file and directory name.
To change the logo you need to go to the file src/@crema/core/AppLayout/components/AppLogo/index.js and replace the Box content with your logo as shown below./
src/@crema/core/AppLayout/components/AppLogo/index.js
//Current Code
<Box sx={{...}}>
<Logo fill={theme.palette.primary.main} />
<Box
sx={{
mt: 1,
display: {xs: 'none', md: 'block'},
'& svg': {
height: {xs: 25, sm: 30},
},
}}
>
<LogoText fill={alpha(theme.palette.text.primary, 0.8)} />
</Box>
</Box>
//Your Code
<Box sx={{...}}>
//Your Logo code goes here... You can use image and svg as you want
</Box>
To stop the jump back to the top, you need to follow the following steps.
  1. 1.
    Go to the file VerticalItem/index.js and add the following code.
const {pathname} = useRouter();
useEffect(() => {
if (process.browser) {
if (pathname === item.url && document.getElementById(pathname)) {
setTimeout(() => {
document
.getElementById(pathname)
.scrollIntoView({behavior: 'smooth', block: 'center'});
}, 1);
}
}
}, [pathname]);
2. Replace the following anchor tag in the same file VerticalItem/index.js
// Replace this with
<a style={{textDecoration: 'none'}}>
// Replace with this
<a style={{textDecoration: 'none'}} id={item.url}>
To change the Crema Current font you need to follow the following steps.
1. Go to the file public/index.html Replace the current Poppins font to the your current font <link href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];200;300;400;500;600&display=swap"rel="stylesheet"> 2. Go to the file src/@crema/utility/AppContextProvider/defaultConfig.tsx and replace the font family of the in the Typography
fontFamily: ["Poppins", "sans-serif"].join(","),
3. Go to the file src/shared/constants/AppEnums.ts update the Font weight according to your project.
export enum Fonts {
LIGHT = "300",
REGULAR = "400",
MEDIUM = "500",
SEMI_BOLD = "600",
BOLD = "700",
}
4. Go to the file public/assets/styles/base.css and replace the current font family 'Poppins' to the your current font in this file.
To remove "No routes matched location" warning you need to follow 2 steps.
  1. 1.
    Go to the file src/@crema/core/AppContentView/index.tsx and need to remove the <Routes> tag from the code
    const routes = useRoutes(
    generateRoutes({
    isAuthenticated: isAuthenticated,
    userRole: user?.role,
    unAuthorizedStructure,
    authorizedStructure,
    anonymousStructure,
    })
    );
    <AppSuspense>
    <AppErrorBoundary>
    {routes}
    <Routes> // remove this tag
    <Route path="/" element={<Navigate to={initialUrl} />} />
    </Routes>
    </AppErrorBoundary>
    </AppSuspense>
    //this should be like below
    <AppSuspense>
    <AppErrorBoundary>{routes}</AppErrorBoundary>
    </AppSuspense>
  2. 2.
    Go to file src/pages/index.tsx and add the default route in the path
    const anonymousStructure = {
    // add here the default route
    routes: errorPagesConfigs.concat([
    {
    path: "*",
    element: <Error404 />,
    },
    ]),
    };
    //this should be like below
    const anonymousStructure = {
    routes: errorPagesConfigs.concat([
    {
    path: '/',
    element: <Navigate to={initialUrl} />,
    },
    {
    path: '*',
    element: <Navigate to="/error-pages/error-404" />,
    },
    ]),
    };
Please let us know if you missed anything in the docs. We will add that asap.