I'm trying to use the useParallax hook on an element in my js file. I'm using NextJs with ReactJs as well as styled components. I used the hook in the following way:
Mainland.js
import React, { useEffect, useRef } from 'react';
import styled, { keyframes } from 'styled-components';
import { useParallax } from 'react-scroll-parallax';
const Mainland = () => {
const { parallaxRef } = useParallax({ speed: 20 }); // set up the hook to use with useRef
const StyledDiv = styled.div`` //Styled Component
return (
<StyledDiv ref={parallaxRef}>
...
</StyledDiv>
The error here is the following:
Error: You must assign the ref returned by the useParallax() hook to an HTML Element.
So I tried to use it without styled components and straight to an HTML element and it still didn't work.
Extra Information: I used the parallax provider in my _app.js file in the following way:
import Layout from '../Components/Layout';
import '../styles/globals.css';
import { ParallaxProvider } from 'react-scroll-parallax';
function MyApp({ Component, pageProps, ...appProps }) {
const isLayoutNeeded = [`/Contact`].includes(appProps.router.pathname);
return (
<>
<Layout state={isLayoutNeeded}>
<ParallaxProvider>
<Component {...pageProps} />
</ParallaxProvider>
</Layout>
</>
);
}
export default MyApp;
Additional info:
https://react-scroll-parallax.damnthat.tv/docs/usage/hooks/use-parallax
Install module inside your project folder. That fixed it for me
npm i install react-scroll-parallax
The useParallax hook returns { ref, controller, element }.
So try this:
const { ref: parallaxRef } = useParallax({ speed: 20 });
Related
I have a export const with a big text, and in the middle I want to add a hyperlink element, but this is not working.
My code:
const myEmail = 'example#example.com'
export const EXAMPLE = `Example of email: ${myEmail}`
Where I import:
import React, { FC } from 'react'
import { EXAMPLE } from '../../constants/ui.constants'
const Example: FC<{}> = () => {
return <div>{EXAMPLE}</div>
}
export default Example
But this shows like this:
How can I show the email like this ?
(this was edit through inspect tools)
You can use dangerouslySetInnerHTML, but you have to be very sure that whatever you are injecting is not something the user has control over, otherwise you will be introducing a XSS vulnerability.
import React, { FC } from 'react'
import { EXAMPLE } from '../../constants/ui.constants'
const Example: FC<{}> = () => {
return <div dangerouslySetInnerHTML={EXAMPLE} />
}
export default Example
I have read the documentation so many times https://vega.github.io/vega-lite/docs/config.html#custom-format-type. I still don't understand how to implement this in react vega. What confuses me the most is this vega object.
view = new vega.View(...);
view.expressionFunction('customFormatA', function(datum, params) {
...
return "<formatted string>";
});
What I am currently doing in React:
import React from "react";
import ReactDOM from "react-dom";
import { createClassFromSpec } from "react-vega";
const spec = {}
const BarChart = createClassFromSpec({ mode: "vega-lite", spec: spec });
export default function TestPage2({ data }) {
return <BarChart data={{ table: data }} />;
}
Is there any example of implementing a custom format type that I can learn from?
There was an error in the documentation and a pull request has been submitted.
You should use vega instead of vega.View like so:
import { expressionFunction } from 'vega';
expressionFunction('customFormatA', function(datum, params) {
return datum;
});
However, note that custom formats do not work with binning; an issue has been opened for this.
Can I take the render method if we talk about components, or the return of a React hook html and put it in a separate html file like angular?
My tsx files are getting so big and would look much cleaner to put the html lines in a whole different file.
Since React use the principle of a virtual DOM it's not possible to move the html in separate file. Best think that you can do is to move the tsx in a separate file like this:
tsx file:
import React from 'react';
export const HelloWorld = () => {
return (
<div>Hello World !</div>
)
}
Import and use it:
import React, { Component } from 'react';
import { HelloWorld } from './HelloWorld';
export class App extends Component {
constructor(props){
super(props);
this.state = { };
}
render() {
return (
<HelloWorld />
)
}
}
I have a specific component who would like to be notified every time the user navigates. Is there some way to access the history passed into the router?
<Router history={history}>
{// ...}
</Router>
Child component:
var Component = React.createClass({
componentDidMount: function() {
// history.listen(this.onRouteChange);
},
onRouteChange: function() {},
render: function() {...},
});
I've noticed that this works:
import { browserHistory } from 'react-router';
var Component = React.createClass({
componentDidMount: function() {
browserHistory.listen(this.onRouteChange);
},
...
});
But it seems like I'd want to use the actual history passed into the router rather than blindly using browserHistory. In some instances I pass in hashHistory instead. Would still appreciate a better solution!
Use withRouter from 'react-router' like this:
import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'
Following a simple component that shows the pathname of the current location. Works the same for history prop, just use history instead of location then.
class ShowTheLocation extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}
render() {
const { match, location, history } = this.props
return (
<div>You are now at {location.pathname}</div>
)
}
}
Create a new component that is "connected" (to borrow redux // terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation)
From: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md
I am creating a website for a client that will use strictly client side react-routing script.
Here is a sample of the router ....
import React from 'react';
import { Route } from 'react-router';
import { generateRoute } from '../utils/localized-routes';
export default (
<Route component={ require('../components/APP') }>
{ generateRoute({
paths: ['/', 'audience'],
component: require('../components/Audience')
}) }
{ generateRoute({
paths: ['speaker'],
component: require('../components/Speaker')
}) }
{ generateRoute({
paths: ['board'],
component: require('../components/Board')
}) },
{ generateRoute({
paths: ['questions'],
component: require('../components/parts/AskQuestion')
}) }
<Route path="*" component={ require('../pages/NotFound') } />
</Route>
);
With this being the code for generateRoute:
export function generateRoute({ paths, component }) {
return paths.map(function(path) {
const props = { key: path, path, component };
// Static `onEnter` is defined on
// component, we should pass it to route props
if (component.onEnter) props.onEnter = component.onEnter;
return <Route {...props} />;
});
}
Problem:
While I understand the Links will bypass server navigation and utilize transition to (client side), on page refresh, I get a "Page Cannot Be found".
If I manually put a hash tag before the browser's url input (myexample.com/#speaker), the page appears, but of course I cannot expect the user to do that.
If I must use hash tags to allow client side routing, where do I put them? I put them in the and/or the router, neither work.
Alternatively, can I achieve total client side routing w/o the ugly hash tags? If, so, how do I do it?
I'd much prefer a solution based on #3, but if all else fails I'll take a solution based on #2.
Any ideas?
Thanks in advance.
I could only find a solution using step #2 above and am stuck with hashtags.
import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'react-router';
import createHistory from 'history/lib/createHashHistory'; <-- using this
// import createBrowserHistory from 'history/lib/createBrowserHistory';
const routerProps = {
routes: require('./router/routes'),
history: createHistory({ <--- added this to remove ugly querystring
queryKey: false
}),
createElement: (component, props) => {
return React.createElement(component, { ...props });
}
};
ReactDOM.render(
React.createElement(Router, { ...routerProps }),
document.getElementById('root')
);
Would still like to know how I can remove the hashtags completely with client-side routing.