Tag: Material-UI

Create a Material-UI Rich Text Editor in React

How to create Material UI Editor in React


So far we have seen many Editor Frameworks and their usage guides. As a React fan you may miss the MUI library. The mui-rte is Material UI RichText editor and viewer.

The editor was built on top of draft-js and supports use defined blocks, styles, autocomplete strategies, async/sync custom atomic blocks, callbacks, and decorators as well as toolbar and theme customization to enhance the editor to all needs.

Let’s quickly setup a React project and install the dependencies.

npx create-react-app myapp
yarn add mui-rte @mui/material @mui/icons-material @mui/styles @emotion/react @emotion/styled

Make sure all the dependencies and peer dependencies properly added.

import { createTheme, ThemeProvider } from "@mui/material/styles";
import MUIRichTextEditor from "mui-rte";

const MuiEditor = () => {
  const save = (data) => {
    console.log(data);
  };
  const myTheme = createTheme({
    // Set up your custom MUI theme here
  });

  return (
    <div className="editorContainer">
      <ThemeProvider theme={myTheme}>
        <MUIRichTextEditor
          label="Type something here..."
          onSave={save}
          inlineToolbar={true}
        />
      </ThemeProvider>
    </div>
  );
};

export default MuiEditor;

Open the example in Sandbox.

How to customize theme in Material UI

How to customize Material UI themes in Reactjs


Material UI is the #1 UI for Reactjs and it continues it journey. Can I customize theme in MUI ?

With custom theme object we can create and implement the theme for any component or a group of component using a wrapper component. We require the following

  • createTheme
  • ThemeProvider

CreateTheme

     const theme = createTheme(
        {
            palette:
                { mode: 'light'}
        }
    );

We can customize the them using the createtheme function.

ThemeProvider

With the ThemeProvider we can provide theme for the component tree. It take a theme as prop.

 return (
        <div>
            <ThemeProvider theme={theme} >
                {props.children}
            </ThemeProvider>
        </div>
    )

Create Mui Dark Mode switch using React Context

How to creaye dark theme switch in using Material UI switch and React Context and State Hooks


Material UI or MUI is one word for all UI needs. It is well documented and easy to use. I really enjoyed it.

In this post I would like to demonstrate how to create dark-mode switcher using the React Context and Material UI switch component.

Context

We already covered the dynamic-Context in detail, please use the posts to learn more about Context and the basic step required.

Our context setup with look like the following 

//context/themeContext.js
 import React from 'react';

export const ThemeContext = React.createContext({
    theme: 'dark',
    setTheme: () => { }
  })
  

//app.js or _app.js
 
import React, { useState } from 'react'; 
import { ThemeContext } from '../context/themeContext';


function MyApp({ Component, pageProps }) {
  const [theme, setTheme] = useState("light")
  const value = { theme, setTheme };
 

  return (
  
      <ThemeContext.Provider value={value}   >
        <Component {...pageProps} />
      </ThemeContext.Provider>
    
  );
}

Theme Switcher

A MUI customized switch can be used to create a theme switcher. We also need to access the context using the useContext hook. The code will look like the following.

The complete switch snippet can be obtained from Material UI switch documentation page. 

import * as React from 'react';
import clsx from 'clsx';
import { styled } from '@mui/system';
import { useSwitch } from '@mui/core/SwitchUnstyled';
import { Tooltip } from '@mui/material';
import { ThemeContext } from '../context/themeContext';
 ...
function MUISwitch(props) {
  const { theme, setTheme } = React.useContext(ThemeContext)
  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
  const stateClasses = {
    checked,
    disabled,
    focusVisible,
  };
  var mode = {

  };

 
  React.useEffect(() => {
    const mode = stateClasses.checked ? 'dark' : 'light'
    setTheme(mode)
  }, [stateClasses])
  return (
    <Tooltip title="Theme switcher">
      <SwitchRoot className={clsx(stateClasses)} >
        <SwitchTrack>
          <SwitchThumb className={clsx(stateClasses)} />
        </SwitchTrack>
        <SwitchInput {...getInputProps()} aria-label="Demo switch" />
      </SwitchRoot>
    </Tooltip>

  );
}

export default function UseSwitchesCustom() {
  return <MUISwitch defaultChecked />;
}

The switcher component can be placed anywhere in component tree and it can change the context value, due to dynamic context.

Tracking changes

In order observe changes in state of the switch component , we can use useEffect and the stateClass. Note that there is no event handler attached to the component.

Implement the Theme

The theme can be implemented as you wish, one of the suggested way is to create a component to implement the theme and wrap other components inside it. Such a component can be .

mport React from 'react'
import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
import { ThemeContext } from '../context/themeContext';

export default function BaseTheme(props) {
    const { theme, setTheme } = React.useContext(ThemeContext)
    const theme1 = createTheme(
        {
            palette:
                { mode: theme }
        }
    );

    console.log('Current Theme - ' + JSON.stringify(theme));
    return (
        <div>
            <ThemeProvider theme={theme1} >
                {props.children}
            </ThemeProvider>
        </div>
    )
}

That’s it.

Leave comment and questions

How to set margin in React MUI component

How to set margin in React Material UI components


Material UI /MUI is one word for all React UI needs, as we know. Let’s learn how set margin in a basic box container.

In MUI React component we can use sx property to customize styles. For margin have to use m, mt / ml options.

  <Box sx={{ mt: 1 }}>
.....

This will set the margin top of the Box to 1.

Create a desktop version of Quasar-Vue app using Electron

How to build desktop version of Quasar Vue app using Electron


Quasar is a UI frame work for developers who were developing web, desk and mobile friendly, responsive app with Vuejs.

With Quasar and Vuejs we can create beautiful Vue app in minutes, thank to the Quasar Frame work. It is easy to learn, I promise you, it didn’t take hours. (Read more about Vuejs).

Running the Desktop version

As you know Quasar app is a web app, it is not meant to desktop or mobile, but with the reactivity of components and controls , it can be much like a desktop app.

With the help of Electron we can build a version for desktop, no matter you are using Mac or Window.

To do this we need electron installed. Quasar CLI will automatically do it for us. For now just hit the terminal with the following command

quasar dev -m electron

This will create the electron project for your app and instantly build executable , also launch app, with developer tools enabled.

That’s all I have today

Following Quasar posts may help you explore further

Quasar UI framework for Vue

About Quasar Vuejs UI framework and How to create and run Vuejs app with Quasar CLI tool


Quasar is a UI frame work for developers who were developing web, desk and mobile friendly, responsive app with Vuejs.

It has rich set of web components (Plenty of them) which is reactive and will save development time. They also provide styling, spacing with directives.

All these component template samples can be easily copied to your vue project with ease, along with scripts.

How to use Quasar in Vuejs

The best option is to use the Quasar CLI and create a project with a default router. 

$ yarn global add @quasar/cli
# or
$ npm install -g @quasar/cli

Create and run project

Using the CLI we can easily create and run project. In fact Quasar uses the Vue CLI to create the project and additionally add dependencies and other stuffs for you.

quasar create <folder_name>

By using the following command you can run the development version of the project. The complete script information can be found on the package.json config file. For now we stick with the dev command

quasar dev

and your app will open on a web browser. For more help visit the Quasar site

Following Quasar posts may help you explore further

Setup Vuetify for Vuejs project

How to add vuetify material UI to vuejs project in easy steps


Vuetify is a Material UI framework for Vuejs which make development of cross platform apps quick and easy. It is a UI library which is full of essential layout, app bar, menu and common UI element required for fast development.

Setup vuetify for Vuejs

  1. Create a vue project with routes (recommended) using the CLI tool either by vue create <project-name> or using vue ui
  2. Add vuetify using the following command 
vue add vuetify

Optionally you can configure it manually from UI while using the vue ui for creating the vue project.

Let’s visit the vuetify site and try to start with a wire frame example.

Following are the basic layout of an landing page of vuetify-vuejs app.

<v-app>
  <!-- Must have the app property -->
  <v-app-bar app></v-app-bar>

  <v-main>
    Hello World
  </v-main>
</v-app>

All of our layout code goes through <v-app> tag and the main used for some special purposes, in our simple app it just a Hello world string. You can find some special app bar and drawers on the UI section

Keep reading these Vuetify Posts on the go

Vuetify

About Vuetify UI Kit for Vuejs


Vuetify is a Material UI framework for Vuejs which make development of cross platform easy. It is a UI library which is full of essential layout, app bar, menu and common UI element required for fast development.

The UI Kit is best suited for mobiles and cross platform development, these component require zero configuration. All you need to do is create a view project, and vuetify and start building.

Users can copy the snippet for the Vuetify site and add to the template and focus on script part.

Another Material UI which superior to Vuetify is Quasar , we will talk about that in another post

Keep reading Vuetify Posts