Category: JavaScript

Sometimes, we want to change color a of Select component’s border and arrow icon with React Material UI.

In this article, we’ll look at how to change color a of Select component’s border and arrow icon with React Material UI.

How to change color a of Select component’s border and arrow icon with React Material UI?

To change color a of Select component’s border and arrow icon with React Material UI, we can call the makeStyles function with an object that has the styles for the before and after pseudoselectors.

For instance, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

const color = "blue";

const useStyles = makeStyles({
  select: {
    "&:before": {
      borderColor: color
    },
    "&:after": {
      borderColor: color
    }
  },
  icon: {
    fill: color
  }
});

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

  return (
    <Select
      className={classes.select}
      inputProps={{
        classes: {
          icon: classes.icon,
          root: classes.root
        }
      }}
      value="1"
    >
      <MenuItem value="1"> Foo 1</MenuItem>
      <MenuItem value="2"> Foo 2</MenuItem>
    </Select>
  );
}

We call makeStyles with an object that has the class name of as the root level properties.

We set the properties to an object that set the '&:before' and '&:after' properties to set the border color of the drop down.

Next, we set the icon color by setting the icon property to an object that sets the fill property to a color.

Then to apply the styles, we call the useStyles hook to return the classes object.

Then we et the className of the Select component to classes.select to set the select drop down’s border color.

And we set the inputProps to an object with the classes.icon property to set the icon’s color.

Now the arrow and bottom border should both be blue.

Conclusion

To change color a of Select component’s border and arrow icon with React Material UI, we can call the makeStyles function with an object that has the styles for the before and after pseudoselectors.

Sometimes, we want to set the background color of the Material UI drawer.

In this article, we’ll look at how to set the background color of the Material UI drawer.

How to set the background color of the Material UI drawer?

To set the background color of the Material UI drawer, we call the makeStyles function to create the styles.

Then we can apply the styles with the useStyles hook returned by makeStyles.

For instance, we write:

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  list: {
    width: 250
  },
  fullList: {
    width: "auto"
  },
  paper: {
    background: "blue"
  }
});

const DrawerWrapper = () => {
  const classes = useStyles();
  const [isOpen, setIsOpen] = useState();
  const sideList = (
    <div className={classes.list}>
      <List>
        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
          <ListItem button key={text}>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </div>
  );

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Left</Button>
      <Drawer
        classes={{ paper: classes.paper }}
        open={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <div
          tabIndex={0}
          role="button"
          onClick={() => setIsOpen(true)}
          classes={{ root: classes.root }}
        >
          {sideList}
        </div>
      </Drawer>
    </>
  );
};

export default function App() {
  return (
    <div>
      <DrawerWrapper />
    </div>
  );
}

We call makeStyles with an object that has the properties set to objects with the styles.

We set the background property to 'blue' to apply a blue background to a component.

Next, in DrawerWrapper, we call useStyles to return the classes object.

And we use that to make the Drawer‘s background blue by setting classes to { paper: classes.paper }.

We then add the content inside by putting sideList inside the div.

Conclusion

To set the background color of the Material UI drawer, we call the makeStyles function to create the styles.

Then we can apply the styles with the useStyles hook returned by makeStyles.

Sometimes, we want to use react-datepicker with React hooks forms.

In this article, we’ll look at how to use react-datepicker with React hooks forms.

How to use react-datepicker with React hooks forms?

To use react-datepicker with React hooks forms, we can wrap it in the Controller component.

For instance, we write:

import React from "react";
import { Controller, useForm } from "react-hook-form";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const {
    handleSubmit,
    watch,
    control,
    formState: { errors }
  } = useForm();
  const onSubmit = (data) => console.log(data);

  console.log(watch("dateInput"));

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="dateInput"
        render={({ field }) => (
          <DatePicker
            placeholderText="Select date"
            onChange={(date) => field.onChange(date)}
            selected={field.value}
          />
        )}
      />
      {errors.dateInput && <span>This field is required</span>}

      <input type="submit" />
    </form>
  );
}

We call the useForm hook to return an object with various properties we use to add the date picker into the form.

Next, we add the Controller component in the form.

We set the control prop to control and we set the render prop to a function that renders the DatePicker component.

Then we set onChange to a function that calls field.onChange to set the value of the date picker.

And we render the value by setting the selected prop to field.value.

Conclusion

To use react-datepicker with React hooks forms, we can wrap it in the Controller component.

Sometimes, we want to map only a portion of an array with React.

In this article, we’ll look at how to map only a portion of an array with React.

How to map only a portion of an array with React?

To map only a portion of an array with React, we can use the JavaScript array’s slice method.

For instance, we write:

import React, { useState } from "react";

const items = ["Item A", "Item B", "Item C", "Item D"];

export default function App() {
  const [showMore, setShowMore] = useState();

  return (
    <div>
      <button onClick={() => setShowMore((s) => !s)}>toggle show more</button>
      {showMore
        ? items.map((it) => <p key={it}>{it}</p>)
        : items.slice(0, 2).map((it) => <p key={it}>{it}</p>)}
    </div>
  );
}

We have a button that toggles the showMore state when it’s clicked.

If showMore is true, then we call items.map with a callback to render all the content of items in their own p elements.

Otherwise, we call slice with 0 and 2 to only return an array with the first 2 elements.

And we call map with a callback to render each item.

Therefore, when we click toggle show more, we should see the list toggle between 2 and 4 items.

Conclusion

To map only a portion of an array with React, we can use the JavaScript array’s slice method.

To add a background video with React, we can add the loop, autoPlay and muted props to the video element.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div>
      <video autoPlay loop muted>
        <source
          src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
          type="video/mp4"
        />
      </video>
    </div>
  );
}

We have autoPlay loop muted added to the video element so that the video plays automatically, repeats when it finishes playing, and it’s muted respectively.

In it, we add the source element with the src attribute set to the URL of the video we want to play in the background.

We add the loop prop to make it restart when the video is finished playing.

The muted prop mutes the video.

As a result, we have a video that loops forever silently on the page.