Categories
React Answers

How to add password strength validation with React, Formik and Yup?

Sometimes, we want to add password strength validation with React, Formik and Yup.

In this article, we’ll look at how to add password strength validation with React, Formik and Yup.

How to add password strength validation with React, Formik and Yup?

To add password strength validation with React, Formik and Yup, we can use Yup’s matches method.

For instance, we write:

import React from "react";
import * as yup from "yup";
import { Formik, Field, Form } from "formik";

const schema = yup.object().shape({
  password: yup
    .string()
    .required("Please Enter your password")
    .matches(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
      "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and One Special Case Character"
    )
});

export default function App() {
  return (
    <div>
      <Formik
        initialValues={{
          password: ""
        }}
        validationSchema={schema}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        {({ errors, touched }) => (
          <Form>
            <Field name="password" type="password" />
            {errors.password && touched.password ? (
              <div>{errors.password}</div>
            ) : null}
            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
}

We create the validation schema with yup.object().shape.

Then we calk yup.string().required to make the field with name password required.

And then we call matches with a regex to enforce the password strength.

Next, we add the Formik component with the validationSchema prop set to schema.

In the render prop function, we add the Field prop with the name prop set to 'password' to make it validate with the Yup password property.

If there’re errors, then we show errors.password property.

Conclusion

To add password strength validation with React, Formik and Yup, we can use Yup’s matches method.

Categories
React Answers

How to clear the Material UI text field Value in React?

Sometimes, we want to clear the Material UI text field Value in React.

In the article, we’ll look at how to clear the Material UI text field Value in React.

How to clear the Material UI text field Value in React?

To clear the Material UI text field Value in React, we can set the value property of the input to an empty string.

For instance, we write:

import React from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";

export default function App() {
  const textInput = React.useRef(null);

  return (
    <div>
      <Button
        onClick={() => {
          textInput.current.value = "";
        }}
      >
        clear
      </Button>
      <TextField
        fullWidth
        required
        inputRef={textInput}
        name="firstName"
        type="text"
        placeholder="Enter Your First Name"
        label="First Name"
      />
    </div>
  );
}

to add a button and a text field.

We assigned the textInput ref to the TextField so we can its input value to an empty string when we click on the Button.

And we set the input value of the TextField to an empty string with textInput.current.value = "".

Conclusion

To clear the Material UI text field Value in React, we can set the value property of the input to an empty string.

Categories
React Answers

How to remove the scrollbar from the React Material UI dialog?

Sometimes, we want to remove the scrollbar from the React Material UI dialog.

In this article, we’ll look at how to remove the scrollbar from the React Material UI dialog.

How to remove the scrollbar from the React Material UI dialog?

To remove the scrollbar from the React Material UI dialog, we can set the style prop of the DialogContent component.

For instance, we write:

import React from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";

export default function App() {
  return (
    <div>
      <Dialog fullWidth={true} maxWidth="xl" open={true}>
        <DialogContent style={{ overflow: "hidden" }}>
          <div>hello world</div>
        </DialogContent>
      </Dialog>
    </div>
  );
}

to set the style prop to an object that sets the overflow CSS property to 'hidden'.

This will hide the scrollbar regardless of content size.

Conclusion

To remove the scrollbar from the React Material UI dialog, we can set the style prop of the DialogContent component.

Categories
React Answers

How to create button with text under the icon with React Material UI?

Sometimes, we want to create button with text under the icon with React Material UI.

In this article, we’ll look at how to create button with text under the icon with React Material UI.

How to create button with text under the icon with React Material UI?

To create button with text under the icon with React Material UI, we can set the flexDirection of the button container.

For instance, we write:

import React from "react";
import Button from "@material-ui/core/Button";
import Settings from "@material-ui/icons/Settings";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(() => ({
  button: {
    height: 95
  },
  label: {
    flexDirection: "column"
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <Button
        classes={{ root: classes.button, label: classes.label }}
        variant="raised"
        color="primary"
        disableRipple={true}
      >
        <Settings className={classes.icon} />
        Message
      </Button>
    </div>
  );
}

We call makeStyles with a function that has the label class property that sets flexDirection to 'column'.

Then we set that as the returned classes as the value of the classes prop.

As a result, we should see that ‘Message’ is below the settings icon.

Conclusion

To create button with text under the icon with React Material UI, we can set the flexDirection of the button container.

Categories
React Answers

How to style BottomNavigation in React Material UI?

Sometimes, we want to style BottomNavigation in React Material UI.

In this article, we’ll look at how to style BottomNavigation in React Material UI.

How to style BottomNavigation in React Material UI?

To style BottomNavigation in React Material UI, we can use the makeStyles function.

For instance, we write:

import React from "react";
import Paper from "@material-ui/core/Paper";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import RestoreIcon from "@material-ui/icons/Restore";
import FavoriteIcon from "@material-ui/icons/Favorite";
import LocationOnIcon from "@material-ui/icons/LocationOn";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(() => ({
  root: {
    color: "green",
    "&$selected": {
      color: "red"
    }
  },
  selected: {}
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <Paper>
        <BottomNavigation value={1} showLabels={true}>
          <BottomNavigationAction
            classes={classes}
            label="Home"
            icon={<RestoreIcon />}
          />

          <BottomNavigationAction
            classes={classes}
            label="Course"
            icon={<FavoriteIcon />}
          />

          <BottomNavigationAction
            classes={classes}
            label="Authors"
            icon={<LocationOnIcon />}
          />
        </BottomNavigation>
      </Paper>
    </div>
  );
}

We call makeStyles with a callback that sets the color of the content to green and the content of the selected button to red.

Then we call useStyles to return the classes which we apply to each BottomNavigationAction by setting the classes prop.

We also set the label prop to add text and the icon prop to add an icon.

The value prop sets the index of the BottomNavigationAction that is selected.

Therefore, the 2nd BottomNavigationAction is red and the rest are green.

Conclusion

To style BottomNavigation in React Material UI, we can use the makeStyles function.