materializecss with reactjs (how to import javascript/Jquery in reactjs)

Question

Good day! im trying to work with parallax(materializecss) in reactjs but the pictures does not come out. i already install the materializecss using npm,

heres my code:

import React from 'react';
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
import Pic1 from '../img/Pic1.jpg'
import Pic2 from '../img/Pic2.jpg';
import 'materialize-css/js/parallax';

    const About = () => {
    return (
            <div className="paralax">
                <div className="parallax-container">
                    <div className="parallax"><img src={Pic1} alt="Building"/></div>
                </div>
                <div className="class section white">
                    <div className="row container">
                        <h2 className="header">Parallax</h2>
                        <p className="grey-text text-darken-3 ligthen-3">
                        Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.
                        </p>
                    </div>
                </div>
                <div className="parallax-container">
                    <div className="parallax"><img src={Pic2} alt="Building"/></div>
                </div>
            </div>


        )
    }
    export default About;

Answer 1

Use react-materialize .

Install: npm install react-materialize

And import Parallax like import {Parallax} from 'react-materialize';

Hence your code becomes:

import React, { Component } from 'react';
import './App.css';
import {Parallax} from 'react-materialize';

class App extends Component {
  render() {
    return (
      <div>
      <Parallax imageSrc="http://materializecss.com/images/parallax1.jpg"/>
      <div className="section white">
        <div className="row container">
          <h2 className="header">Parallax</h2>
          <p className="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
        </div>
      </div>
      <Parallax imageSrc="http://materializecss.com/images/parallax2.jpg"/>
    </div>
    );
  }
}

export default App;

I have used image hyperlinks. But you can replace them with static images also.

Also, import jquery befor materialise.min.js in your index.html

  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

For Reference : https://react-materialize.github.io/#/

PEACE

Answer 2

To use Javascript components of Materialize CSS, we need to get the reference of that particular element that we're gonna use.

We're using ref because we're triggering imperative animations.

When to Use Refs

• Triggering imperative animations.
• Integrating with third-party DOM libraries.

As we're using MaterializeCSS which is a third-party CSS framework so in order to use the animations of that we're using ref .

When to use refs in React

CodeSandbox - Parallax Demo

You can check other Materialize CSS components in React from this repository - GermaVinsmoke - Reactize

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
import Image1 from "../public/parallax2.jpg";
import Image2 from "../public/parallax1.jpg";

class Parallax extends Component {
  componentDidMount() {
    M.Parallax.init(this.Parallax1);
    M.Parallax.init(this.Parallax2);
  }

  render() {
    return (
      <>
        <div className="parallax-container">
          <div
            ref={Parallax => {
              this.Parallax1 = Parallax;
            }}
            className="parallax"
          >
            <img src={Image2} />
          </div>
        </div>
        <div className="section white">
          <div className="row container">
            <h2 className="header">Parallax</h2>
            <p className="grey-text text-darken-3 lighten-3">
              Parallax is an effect where the background content or image in
              this case, is moved at a different speed than the foreground
              content while scrolling.
            </p>
          </div>
        </div>
        <div
          ref={Parallax => {
            this.Parallax2 = Parallax;
          }}
          className="parallax-container"
        >
          <div className="parallax">
            <img src={Image1} />
          </div>
        </div>
      </>
    );
  }
}

export default Parallax;