Categories
React Answers

How to embed YouTube autoplay video on mobile with JavaScript?

To embed YouTube autoplay video on mobile with JavaScript, we use the YT.Player constructor.

For instance, we write

const createYoutubePlayer = () => {
  const youtubePlayer = new YT.Player("youtubePlayer", {
    videoId: "YOURID",
    width: 277,
    height: 600,
    playerVars: {
      autoplay: 1,
      controls: 0,
      showinfo: 1,
      modestbranding: 1,
      loop: 1,
      fs: 0,
      cc_load_policy: 0,
      iv_load_policy: 3,
      autohide: 1,
      playsinline: 1,
    },
    events: {
      onReady: (e) => {
        e.target.mute();
      },
      onStateChange: (e) => {
        this.onPlayerStateChange(e);
      },
    },
  });
};

to create a new YT.Player instance. with the ID of the video container element.

And then we set some options.

We add autoplay on load with

autoplay: 1

We hide the controls with controls: 0.

We hide the video title with showinfo: 1.

modestbranding: 1 hides the YouTube branding.

loop: 1 makes the video loop.

Categories
React Answers

How to post image with fetch and JavaScript?

To post image with fetch and JavaScript, we call fetch with the body set to the form data object with the file to upload.

For instance, we write

const fileInput = document.querySelector("#your-file-input");
const formData = new FormData();

formData.append("file", fileInput.files[0]);

const options = {
  method: "POST",
  body: formData,
};

fetch("your-upload-url", options);

to select the file input with querySelector.

Then we create a FormData instance and put the selected file there with append.

fileInput.files[0] has the first selected file.

Then we call fetch with the upload URL and options, which has body set to formData.

Categories
React Answers

How to fix overriding the React Material UI styles not working?

To fix overriding the React Material UI styles not working, we call makeStyles to create classes with the styles.

Then we can apply them with the useStyles hook.

For instance, we write

import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles((theme) => ({
  tabRoot: {
    // ...
  },
  flexContainer: {
    width: "100%",
    justifyContent: "space-between",
  },
}));

export default useStyles;

to call makeStyles with an arrow function that returns an object with the class names as the properties and the styles in an object as values.

Then in the component, we write

const classes = useStyles();
// ...

<Tabs
  classes={{ flexContainer: classes.flexContainer }} // override for tabs
  //  ...
>
  <Tab classes={{ root: classes.tabRoot }} /> // override for tab
</Tabs>

to call the useStyles hook that was returned and imported.

And then we set the classes prop to an object with the classes properties returned from useStyles to apply the styles.

Categories
React Answers

How to import component outside src/ directory with React?

To import component outside src/ directory with React, we can declare a local dependency on package.json.

For instance, we write

{
  //...
  "dependencies": {
    "app-b-dashboard": "file:./packages/app-b-dashboard"
    //...
  }
  //...
}

to declare the app-b-dashboard dependency in the dependencies section of package.json.

Then we run

npm install

to install the dependencies.

And then we add

import Dashboard from 'app-b-dashboard/container' 

to import the app-b-dashboard dependency which is installed in node_modules.

Categories
React Answers

How to fix tests can’t fail within setImmediate or process.nextTick callback with React and Jest?

To fix tests can’t fail within setImmediate or process.nextTick callback with React and Jest, we can use await when we mount our component for testing.

For instance, we write

it("should render proper number of messages based on itemsPerPortion", async () => {
  const component = await shallow(
    <PublishedMessages
      itemsPerPortion={2}
      messagesStore={mockMessagesStore()}
    />
  );

  component.update(); // still needed
  expect(component.find(".item").length).toBe(2);
});

to mount the component PublishedMessages component with shallow.

We use await to wait for the next tick.

And then we call component.update to update the component and call expect to check our result.