I'm trying to use Rellax, a JS parallax library, in my React app.
I've downloaded Rellax through npm and imported Rellax into a React component. Rellax's docs then require assigning a rellax variable to the new Rellax constructor, which takes as an argument the query selector.
Like so:
var rellax = new Rellax('.rellax');
However, when I call the component, I receive this error:
Error: The elements you're trying to select don't exist.
However, I do use this class in the component itself.
Below is the full component:
import React from 'react';
import Rellax from 'rellax';
import 'sample.css';
var rellax = new Rellax('.rellax');
const SampleComponent = () => {
return (<div>
<div className="rellax square"></div>
<div className="rellax rectangle"></div>
</div>);
}
export default SampleComponent;
Does anyone have any idea why this isn't working?
Below is a link to Rellax docs: https://github.com/dixonandmoe/rellax
Thanks!
That new Rellax('.relax') constructor is called as soon as that file is loaded (ie, imported by another component). But when the file is loaded, obviously the component hasn't been rendered yet, so the .rellax elements aren't in the DOM.
Instead, you need to call the Rellax constructor when you know the component has rendered. That's what React's componentDidMount is used for. It gets called when the component has been rendered in the DOM (so libraries that use DOM elements can find the element they need).
import React from 'react';
import Rellax from 'rellax';
import 'sample.css';
class SampleComponent extends React.Component {
componentDidMount() {
// We can keep a reference to Rellax in case we need it later
this.rellax = new Rellax('.rellax')
}
render() {
return (
<div>
<div className="rellax square"></div>
<div className="rellax rectangle"></div>
</div>
)
}
}
export default SampleComponent
Related
I am trying to navigate to other page by using button click but it is throwing error by sayng that can not read property push of undefined.
I have did some research on history which is used forfunctional component.
How i can make use of history in class component or what is other way (react way) to navigate other page.
here is my code.
import React, { Component } from 'react';
class CentralBar extends Component {
constructor(props){
super(props)
this.state = {
}
this.someText = this.someText.bind(this);
}
someText(){
this.props.history.push(`/login/`);
}
render() {
return (
<div className="crentralPanel">
<button type="button" class="btn btn-light " onClick={this.someText}>Click on Text</button>
</div>
);
}
}
export default CentralBar;
history can be used in a class component. You just get access to it in a different way than in a function component.
In a function component, you would typically use the useHistory hook. But since hooks are exclusive to function components, you have to use a different method in a class.
Probably the simplest way is to use the withRouter higher order component. The only change you need to make is adding the import at the top, and wrapping the export.
import { withRouter } from 'react-router-dom';
export default withRouter(CentralBar);
This wrapper injects 3 props into the component: history, match, and location.
Note that the same rules apply to the HOC as do the useHistory hook since it's just another way of reading from the react-router context: the component must be a child of a Router provider component.
Please wrap your class component with withRouter.
import { withRouter} from 'react-router-dom';
export default withRouter(CentralBar);
If you didn't install react-router-dom module, please run this command to install this node module.
Please let me know if it works or not.
You can't use hooks in class components. You can find many solution in the Internet how to get it around, but I don't think it is worth it. If you really need use hooks in this component, make it with Functional Component. Class components should be used in react in small amount of cases. You can read about it here: React functional components vs classical components
I am trying to use jquery.infinitedrag to create a component in react. My code is here:
//Grid.js
import React from 'react'
import './jquery/jquery.min.js'
import './jquery/jquery-ui.min.js'
import './jquery/jquery-ui.min.css'
import './jquery/jquery.infinitedrag.js'
export default class Grid extends React.Component{
componentDidMount() {
$.infinitedrag("wall")
}
render() {
return(
<div id="wall"/>
)
}
}
This is supposed to work by making a div (identified by id) when react renders and then filling in an infinite grid later once the component mounts. The problem is, for some reason, jquery.infinitedrag is getting confused. Here is the error:
Failed to compile.
./src/jquery/jquery.infinitedrag.js
Line 108:4: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 277:4: 'jQuery' is not defined no-undef
My file structure looks like this:
src
-jquery
-jquery.min.js
-jquery-ui.min.js
-jquery-ui.min.css
-jquery.infinitedrag.min.js
-Grid.js
-misc other components and stuff
I am fairly new to javascript, so this is probably something dumb.
npm install jquery OR npm update to remove the second error.
so I had an idea of generating various "landing pages" for my project that would use similar elements with different data.
The idea is to essentially to have my react app (create-react-app) load a "container component" and would then display static landing pages.
For example files are...
screenContainer.jsx
pageOne.html
pageTwo.html
Depending on the user's choice I can render pageOne.html or page2.html. These pages are "templates" which work with jquery css, etc.
Is this possible? If so, what is the best approach.
I'm using html-loader now but am stuck at this:
./src/landingPages/serre/assets/js/plugins/jquery/jquery-3.3.1.min.js
Line 2:1: Expected an assignment or function call and instead saw an expression no-unused-expressions
Any ideas?
Thanks!
Here is my current file react screen container component:
require("es6-object-assign/auto");
import React, { Component, Fragment } from "react";
import $ from "jquery";
import Page from "../landingPages/serre/index.html";
var ReactDOMServer = require("react-dom/server");
var HtmlToReactParser = require("html-to-react").Parser;
var htmlDoc = { __html: Page };
class CreatorLandingPageContainer extends Component {
constructor(props) {
super(props);
}
render() {
return <Fragment>HELLO{this.renderPage()}</Fragment>;
}
renderPage() {
var htmlToReactParser = new HtmlToReactParser();
var reactElement = htmlToReactParser.parse(htmlDoc);
return reactElement;
}
}
export default CreatorLandingPageContainer;
This applies to just about any scenario along these lines:
I have a React app that uses React Router <Link>s, and they are scattered throughout my app. I want to extend or prototype the <Link> component so that there is a new attribute when they are rendered. (I just want to add an attribute to all Link tags.)
How can I update the Link component that is being used throughout the app, to have a new attribute [without creating a new component, like <CustomAttributeLink>]?
Thanks
The best way to do this is by cloning the element, you should use React.cloneElement. To make the component usable everywhere, just create a new component using it, and export it.
import React from "react";
import {Link} from "react-router";
const CustomLinkAttribute = React.cloneElement(Link, {
newProp: "New prop val here"
});
export default CustomLinkAttribute;
You can clone the element and add the extra props using React.cloneElement e.g:
var clonedElementWithExtraProps = React.cloneElement(
MainElement,
{ newProp: "This is a new prop" }
);
Return clonedElementWithExtraProps;
I am using Styled Components but getting a problem trying to style a component of my own creation.
It is exported in the normal way from a separate npm package.
Package
FormComponents.js
export SubmitButton from './_submit-button';
_submit-button.js
export styled.button`somestyles`;
components.js
import * as Form from './form-components';
export { Form }
index.js
import * as Components from './components'
export const FormComponents = Components.Form;
Then in my actual component I want to use it I have:
import { FormComponents as Form } from 'packagename';
const Button = styled(Form.SubmitButton)...
and I'm receiving the error cannot read SubmitButton of undefined.
If however I put the const Button = ... in the render method, it finds everything fine. So I assume that the component isn't being instantiated until React kicks in.
It's possible with other elements however, for example if I change it to use:
const Button = styled(Link)
(Link from react-router-dom)
it finds it fine.
Am I exporting wrong?