I have searched for Browser support for Semantic UI react and I have found that Semantic UI (not react version) to support the following version
Browser Support :Last 2 Versions FF, Chrome, Safari Mac IE 11+ Android 4.4+, Chrome for Android 44+ iOS Safari 7+ Microsoft Edge 12+ Although some components will work in IE9, grids and other flexbox components are not supported by IE9 and may not appear correctly.
Is it safe to assume that semantic-ui react also follows the same minimum browser support? I could not find that info in their GitHub page or website.
From the Semantic UI React docs:
Can I use a custom CSS theme?
Yes. Semantic UI React includes components that render valid Semantic UI HTML, no CSS is included. This allows you to load any Semantic UI CSS theme on top of your Semantic UI React app.
Since you have to include your own CSS, you can pull those files from the official Semantic UI distribution and have their version support assurances.
Related
Is Bootstrap 5 compatible with React?
I've read that prior versions of Bootstrap (before version 5) effect the DOM, and therefore are not compatible with React. However, I heard that Bootstrap 5 is pure CSS. Does this mean that it is compatible with React?
Edit:
I stand corrected. It does use vanilla JS, but jQuery is removed.
I'm reading
https://superdevresources.com/bootstrap5-vs-bootstrap4-whats-new/
Vanilla JavaScript instead of jQuery Ever since Bootstrap was introduced, it utilized jQuery as a dependency to offer dynamic
features such as menu expansion, carousel, dropdowns etc. However,
this forced dependency on jQuery was not liked by many developers who
wanted to use Bootstrap with modern JavaScript frameworks such as
React and Vue.js. With Bootstrap 5, they have removed this dependency.
It KIND of sounds like they remove jQuery, and that it allows compatibility with React and Vue.js. But it doesn't actually says it's compatible.
I think you have try to use some component library from bootstrap. some updated library compatible with Bootstrap v5
i.e. reactstrap using Bootstrap v5.1.0
I can see from the Material UI documentation that the user is responsible for loading the Roboto font :
Material UI is designed to use the Roboto font by default. You may add it to your project with npm or yarn via Fontsource, or with the Google Fonts CDN.
The Roboto font will not be automatically loaded by MUI. You are responsible for loading any fonts used in your application.
I tried one of their example projects (the vitejs one). I can't see any loading of the Roboto font in this project.
When starting it using npm run dev, I can see the text is correctly displayed with the Roboto font despite the fact that I can't see any trace of this font in the index html page.
I didn't see any <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"/> in the header. I also tried to find any #font-face in the inline styles without any success.
I'm wondering where does the Roboto font come from ? Is it included by default in modern computers (I'm currently using firefox on a ubuntu laptop) ?
TL;DR
No -- you do need to install the Roboto font to use MUI, since it is configured with fallbacks (and you can override the Roboto usage globally), but if you want to conform to the used version of Google's Material Design guidelines or have a more consistent cross-platform UI, you may want to.
What you're most likely seeing is the fallback font (your system's version of Helvetica or another sans serif font, if Roboto is not installed locally). They do look somewhat similar, but upon closer inspection of the subtleties, you can see that the fonts differ. (Rounding, spacing, etc.)
CodeSandbox - MUI with Roboto loaded
CodeSandbox - MUI without Roboto loaded
Pre-installed OSes
As far as I'm aware, Android is the only OS where Roboto is a pre-installed font.
Not installed by default:
MacOS Monterey Font List
Windows 11 Font list
(I couldn't reasonably find a list of Ubuntu pre-installed fonts)
Confirming on Firefox
On Firefox the rendered (used) font can be seen by inspecting an element, then viewing the "Fonts Used" section of the "Fonts" panel.
Confirming on Chrome
On Chrome the rendered (used) font can be seen by inspecting an element, then viewing the "Rendered Fonts" section of the "Computed" tab.
Fun side note -- Firefox used to have quite a few font loading/rendering problems which is why I still have trust issues using Firefox for dev.
I'm working on an update of an existing project, and the whole project uses Bootstrap , and the only place where I would like to replace bootstrap by semantic UI is in components where I defined list items.
Here is what i've done :
1 - I've followed the following guide : Get Started with Semantic UI to install React semantic UI
2 - And in my header tag, i've place the semantic UI cdn before bootstrap
Note : I've use the React Bootstrap for bootstrap
The semantic UI components render as expected , but the only problem is that the whole pages are now using semantic UI even my form field that i've created with bootstrap.
Where can the problem come from?
There can (will) be a lot of conflicts between SUIR and bootstrap. You probably shouldn't import the whole package. Instead install only needed modules. You can find a list of individual ones here
Certain elements in both packages share similar naming patterns, so there will be namespace conflicts. You can rename semantic element keywords in semantic.js and semantic.css.
Unfortunately I can't share the website in question, I just hope someone can steer me in the right direction without seeing either it or too much of the code.
The React Native(iOS only) app is built with;
react 16.0.0-alpha.12
react-native 0.47.1
The website is built with;
React 16.0.0
Babel is set up correctly, and babel-polyfill is baked in too.
Description
The use-case is that we need to load, say, the FAQs page from the company ReactJS-based site in the mobile phone app's webview component.
However, the webview does not load the bundle.js for the website. CSS, HTML ect loads, but not the React bundle. Running JS inline in a script tag as a test works, but only if I remove the bundle.js file from src.
So something about the ReactJS build does not play nicely when loaded in a RN Webview. The site loads just fine via the mobile phone browsers however.
Currently I am using Highcharts for my web app, but now I am building an android app using react-native. Will Highcharts work with React-native.
HighCharts works with the DOM. You cannot use HighCharts or charting libraries that depend on the DOM directly in React Native, but you can use charting libraries in a WebView with React Native. I have not use High Charts specifically, but have used other charting libraries with WebView and it works great.
Here you can use this component to send the config json to the componente and it will be displayed
https://github.com/TradingPal/react-native-highcharts
Two main ways you can utilise Highcharts in React Native app are :
WebView component. I used this technique on other platforms (Appcelerator Titanium) as well.
Official minimal Highcharts wrapper for React : highcharts-react-native.
As of now pre-requisite for this are:
node 11.2+
npm 6.7.0+ or similar package manager
React 16.4+
React native 0.59.3+
To install:
npm install #highcharts/highcharts-react-native
NOTE: There are other un-official wrappers as well like react-native-highcharts but I have not used them.
You can use this module:
react-native-highcharts.
It works using the web engine on Android or iOS and the Highcharts JavaScript module to render dynamic charts.
Example:
<ChartView style={{height:300}} config={conf}></ChartView>
Add this line to the ChartView component : originWhitelist={['']}
Example:
<ChartView style={{height:300}} config={conf} originWhitelist={['']}></ChartView>