material-ui-image
material-ui-image copied to clipboard
Can you please support Martial UI v5?
Can you please support Martial UI v5?
+1
I created a fork (not backwards compatible) as MUI v5 is official now, it would be a problem for people that wants to migrate to it such as me.
Which means in short this for Image component :
import CircularProgress from '@mui/material/CircularProgress'; // v5
// import CircularProgress from '@material-ui/core/CircularProgress' // v4 and others
import common from '@mui/material/colors/common' // v5
// import common from '@material-ui/core/colors/common' // v4 and others
import grey from '@mui/material/colors/grey' // v5
// import grey from '@material-ui/core/colors/grey' // v4 and others
import BrokenImage from '@mui/icons-material/BrokenImage' // v5
//import BrokenImage from '@material-ui/icons/BrokenImage' // v4 and others
And this for package.json :
"peerDependencies": {
"@material-ui/icons": "^1.0.0 || ^3.0.0 || ^4.0.0",
"@mui/icons-material": "^5.0.0",
"@material-ui/core": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0",
"@mui/material": "^5.0.0",
"react": "^16.3.0 || ^17.0.0"
},
If you wish to preserve v4 users for some time, you can conditionally import the needed stuff based on what is available. Such as using a new file called 'backward-compatibility.js'
function detectVersion() {
try {
require.resolve("@material-ui/core");
return "Not v5"";
} catch(e) {
return "v5";
}
}
const detectedVersion = detectVersion();
export const CircularProgress = (detectedVersion === "v5") ? '@mui/material/CircularProgress' : '@material-ui/core/CircularProgress' ;
export const common = (detectedVersion === "v5") ? '@mui/material/colors/common' : '@material-ui/core/colors/common';
export const grey = (detectedVersion === "v5") ? '@mui/material/colors/grey' : '@material-ui/core/colors/grey';
export const BrokenImage = (detectedVersion === "v5") ? '@mui/icons-material/BrokenImage' : '@material-ui/icons/BrokenImage' ;
These paths can so be reused in your Image component.
My attempt in making material-ui-image support mui v5 using patch-package
diff --git a/node_modules/material-ui-image/lib/components/Image/Image.js b/node_modules/material-ui-image/lib/components/Image/Image.js
index 8025af2..2386712 100644
--- a/node_modules/material-ui-image/lib/components/Image/Image.js
+++ b/node_modules/material-ui-image/lib/components/Image/Image.js
@@ -9,13 +9,13 @@ var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
-var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
-var _common = _interopRequireDefault(require("@material-ui/core/colors/common"));
+var _common = _interopRequireDefault(require("@mui/material/colors/common"));
-var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
+var _grey = _interopRequireDefault(require("@mui/material/colors/grey"));
-var _BrokenImage = _interopRequireDefault(require("@material-ui/icons/BrokenImage"));
+var _BrokenImage = _interopRequireDefault(require("@mui/icons-material/BrokenImage"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
Thanks for the fork @jy95 - works well.
Worth mentioning I needed to update my imports:
+import Image from "@jy95/material-ui-image";
-import Image from "material-ui-image";
do not conditionally import, create a new version instead.
+1
No updates in previous 6 months, Material UI v5 compatible update, please~~~~~~ @jy95 @orinoco thank you anyway, it worked for me as well.
PRs are welcome, the solution above looks nice. We don't use MUI v5 and thus didn't have a reason to port it, yet.
@jy95 are you interested in making your changes as a PR for this repo?
We went with https://github.com/benmneb/mui-image which supports MUI v5.