How to import material-ui components? - reactjs

Heavily using material-ui in my app, is there a way to avoid doing imports in each app component like this?
import Typography from "#material-ui/core/Typography";
import Box from "#material-ui/core/Box";
import Grid from "#material-ui/core/Grid";
import Container from "#material-ui/core/Container";
....
or this:
import {Typography, Box, Grid, Container} from "#material-ui/core";
Is there such thing like this? So that I don't need to import each component?
import * from "#material-ui/core"
Thanks in advance! :D

Yes, there is an import all in JavaScript. You can do it like so:
import * as Mui from '#material-ui/core';
This puts all of the named exports of #material-ui/core into the Mui "namespace". Then, you can easily access any of the components i.e.:
<Mui.Typography>Test</Mui.Typography>
You can read more about import here.

The first option is not much clean from an import statement perspective, especially when you want to import and use a lot of Mui components, but as you use path imports to avoid pulling in unused modules, gets an optimized bundle size automatically.
The second option (import * from "#material-ui/core"), on the other hand, is the most convenient from a development perspective, and also makes you have a clean import statement, but will make your application packages larger than they import each component separately depending on what part of components you are using.
Moreover, there is a large scale application you need to import from different sources of Material-ui:
import {} from '#material-ui/core';
import {} from '#material-ui/icons';
import {} from '#mui/material';
A better optimized approach, is to create a single file in your project where you import each component that you use individually, then export them all under a single namespace:
// src/mui/index.js
export { default as MenuItem } from '#material-ui/core/MenuItem';
export { default as TextField } from '#material-ui/core/TextField';
export { default as Select } from '#material-ui/core/Select';
export { default as ClearIcon} from '#material-ui/icons/Clear';
export { default as FormControl } from '#material-ui/core/FormControl';
export { default as Button } from '#mui/material/Button';
...
Then you can import that file wholesale into each component where you need it:
// ../../MyComponent.js
import {
MenuItem,
TextField,
Select,
ClearIcon,
FormControl
} from 'mui';
Now you have a clean import statement and optimized bundle size as well.
Working with absolute path: I never address components with a relative path (e.i ../../../mui). you can take a look here if you don't know how to use absolute path in React.

Hi you can do this in following way:
create a folder called collections
create a file called index.js under collections folder
write the following code in index.js
export {default as Button} from "#material-ui/core/Button";
export {default as Card} from "#material-ui/core/Card";
export {default as Paper} from "#material-ui/core/Paper";
now import collection like bellow:
import * as collections from './collections';
Your component file will be as:
import React, {Component} from "react";
import * as collections from './collections';
class Box extends Component {
render() {
return (
<div>
<collections.Button>
Test
</collections.Button>
<collections.Card>test</collections.Card>
<collections.Paper>test</collections.Paper>
</div>
);
}
}
export default Box;

Related

Which import syntax for React allows for tree shaking?

Which JavaScript import syntax allows for tree shaking (preferably backwards compatible)?
1.
import Button from '#mui/material/Button'
import TextField from '#mui/material/TextField'
import {Button, TextField} from '#mui/material/'
import * from '#mui/material/'
All of the above
Edit:
The real answer is in the comments section of the marked correct answer.
In your case either 1 or 2, both are fine. These will import only Button,TextField from material.
1.
import Button from '#mui/material/Button'
import TextField from '#mui/material/TextField'
import {Button, TextField} from '#mui/material/'
For third one, I assume you meant
import * as MuiMaterial from '#mui/material/'
This will import everything from material

React Semantic UI with Typescript errors

I'm currently converting one of my components to a .tsx file and I've run into some weird errors on the semantic ui components that I am currently using and I can't for the life of my figure out what is going on.
any advice is much appreciated
SemanticUI use named export and import so the import should be
import { Search, Icon } from "semantic-ui-react";
// or
import { Icon } from "semantic-ui-react";
import { Search } from "semantic-ui-react";
instead of
import Search from "semantic-ui-react";
import Icon from "semantic-ui-react";

Cannot import components from react-bootstrap

I'm new to React and started exploring bootstrap few days ago. But, whenever I'm trying to import something from react-bootstrap, it's throwing error.
I've already tried reinstalling react-bootstrap. But it doesn't solve the problem. These are my imports:
import React, { Component } from 'react';
import {Button} from 'react-bootstrap/Button'; <-- culprit
import logo from './logo.svg';
import './App.css';
import Chart from './components/Chart';
import axios from 'axios';
import {Typeahead} from 'react-bootstrap-typeahead'; <-- works fine
The error is in some line in the ThemeProvider.js, which comes with react-bootstrap.
TypeError: Object doesn't support property or method 'createContext'
15 |
16 | var _react = _interopRequireWildcard(require("react"));
17 |
> 18 | var ThemeContext = _react.default.createContext({});
19 |
20 | var Consumer = ThemeContext.Consumer,
21 | Provider = ThemeContext.Provider;
When you import something wrapped around with {}, it refers to something that is exported with an explicit name identifier.
In this case: import {Button} from 'react-bootstrap/Button' would mean that file has explicitly named one of their exports Button. But that's unlikely, because conventionally with these libraries, when you import from a specific file like /Button, they will almost always use a default export instead.
The solution would be to simply get the default export by doing:
import Button from 'react-bootstrap/Button'
With a default export, you can name the import anything you want, even something like this:
import MyButton from 'react-bootstrap/Button'
Alternatively, you can just import from the head folder. In that case, you would actually have to use {} to fetch the named items.
import {Button, Input, Form} from 'react-bootstrap';
try this:
import {Button} from 'react-bootstrap';
or:
import Button from 'react-bootstrap/Button'
and you need to install bootstrap css and import it:
1.
npm install bootstrap
2.
import "bootstrap/dist/css/bootstrap.min.css"
When you are importing a Button or any component wrapped around with curly braces, you do not need to include the component name after the backslash.
simply put
import {Button} from 'react-bootstrap/';
when we import a component without wrapped around with {}, we need to give the component name like this.
import Button from 'react-bootstrap/Button';

Using import relative path in React

I am trying to import Dashboard from LoginPage component.
I tried
import Dashboard from './scenes/Dashboard
import Dashboard from './Dashboard
import Dashboard from '../../Dashboard
but they all didn't work.
What is the correct way to import it?
If the component name is 'DashboardComponent' exported using export default, you can import by,
import DashboardComponent from '../Dashboard/DashboardComponent'
if it is not default export, it can be imported using {} as,
import {DashboardComponent} from '../Dashboard/DashboardComponent'

How to import all components in React?

I want to do this
in src/modules/layout/nav.js
...
export default NavBar;
in src/modules/layout/side.js
...
export default sideBar;
in src/modules/layout/index.js
import NavBar from './nav';
import sideBar from './side';
export { NavBar, sideBar };
in src/modules/index.js
import * from './layout';
The last bit does not work. According to the tutorial I would then be able to go to src/App.js and use the navBar as so:
import {navBar} from './modules';
But the fact that * does not work I can't do that. Is there any alternative without having to go like this
in src/modules/index.js
import * as All from './layout';
export All;
Then in App.js, go All.navBar. That feels ugly
Well, I have gone through what you have; I feel what you actually needed is to understand the reason for doing that. I am pretty sure what you want to achieve is to have your components imported from a single file rather than from the files where the components were exported.
You don't want to do this:
import NavBar from 'src/modules/layout/NavBar';
import SideBar from 'src/modules/layout/SideBar';
But what you want is to import all your components from a single file wherever you would want to use them.
So, if that is the case, you don't need to add more complexities. All you just need to do is:
// export the components like this
export default NavBar;
export default SideBar;
// Then, in your src/modules/layout/index.js file, import // the components you exported just the way you did it
import NavBar from './NavBar';
import SideBar from './SideBar';
export {
NavBar,
SideBar
}
// Hence, wherever you need both components, you can easily do this:
import { NavBar, SideBar } from '../index.js'
// From the above, you are just importing both components from the index.js file.
So, I believe that answers your question.
Just to add to Onyekachi Samuel's answer and to answer the all part of the title:
After creating the src/modules/layout/index.js file as he described, you can import all by:
import * as All from './layout'
And use the exported components:
<All.NavBar/> <All.SideBar/>
For instance:
// Folder structure:
// |-App.js
// |-Layout
// |-NavBar.js
// |-SideBar.js
// |-index.js
// App.js in the same location as Layout folder
import React from 'react';
import * as All from './layout'
export default function App(props) {
return (<div>
<All.NavBar/>
<All.SideBar/>
</div>)
}
Hope this might clarify it for some.

Resources