I have a problem with accessing the React Context object in my Custom Document page (Next.js).
Since I am working on a cookie banner for GDPR purpose, I want to use the React Context state in order to prevent the analytic scripts to be fired in the Custom Document page, if the GDPR is not accepted by the user.
However, I cannot figure out how to access the React Context state within my custom _document.js page.
Is that possible at all?
Or is there another good way in next.js how I can implement the GDPR Cookie Banner?
Many thanks in advance!
JP
Related
I'm currently developing a React SPA with a Spring Boot backend API.
For one use case i need to create a dynamic link which contains login credentials for a one-time-User. With this link a user needs to be able to login to the SPA and use it further from outside the application.
This is the first time I'm working with a SPA.
What is the best way to achieve this goal?
I would really appreciate some ideas.
best regards
You probably need to use a Router (like React Router). These cause different components to be rendered in React depending on the current URL, and from there different code can be run (likely from event handlers or useEffect if you're using function components).
I have a SPA web application, in REACTJS for investment consultation. However, I have to refactor it to make it possible to share its states by link, so that the user shares the link and by the link the selected items are shared. I want to know if you have a solution through some lib nodeJs or React that helps me solve this problem. Thank you!
If you want to share react state with only an http link and there's no stateful backend, you don't have a lot of options other than keeping state data in the URL. There is a useQueryParams hook would give you the basic tools you need for something like that
https://github.com/pbeshai/use-query-params
You can see some discussion of this technique below with an independent implementation
https://medium.com/swlh/using-react-hooks-to-sync-your-component-state-with-the-url-query-string-81ccdfcb174f
We will be doing our first project using React.
It will not be a Single Page App, but a Multiple Page App.
What I'm trying to figure out at the moment is : what's the difference between a component and an app.
If I only use components, can I still use Redux to have some state management on the current page ? Or do I need an app for this ?
Thanks for the information you can bring !
THoma
There is no special object called "React App". React Components build an "React App" by coming together.
But React Components are formed like tree structure. That means each component have a parent component so you can create a React Component that named "App" and can put another components inside it.
You don't need redux for state management in React Components.
I hope the answers have helped.
Your app may contains a single component and still it will be a react App. If you are using multiple components in a page you can still use react-redux. Redux is basically a container for your states and let suppose you need some state from one component to be consumed in another, Redux provide you a mechanism to make the communication efficient and predictable.
You can also look at the React Context APIs as an alternate to Redux.
An app is simply a component that holds the root of the work you are trying to do. For example an App may have the navigation menu, testimonials, adverts, content, login avitar etc.
If you are making a single App per page (For example a testimonial) then you would still have a SPA. For example, adding testimonials, searching, editing.
You should only use Redux if you are using a SPA with lots of different parts with data in common. If you are making a one-app-per-page and there is no cross over in data then you can simply using Reacts State/Props to hold your data.
Redux is good, but it forces you into a complex path your should try to avoid. If you find yourself wanting data from different domains (customers address and a list of testimonials) then you should use Redux.
If this is a new applications (green) then I strongly recommend you build the whole thing within a SPA using React-Router to control components. you can use frameworks like Next.JS to ensure the site remains small in size (dynamically loading script only when required).
I am thiking of Ad network such as Google Adsense, Outbrain etc.
I want to insert the ad within the contents but the ad is also refresh again and again every time react render the view. How can I deal with this issue?
React offers a variety of ways to manage and assist its decision making when it comes to updating components.
Use a key for the component containing the ad. React will be able to more intelligently know if a component needs to update or not. This could alleviate some or all of the pain in the refresh on your client.
https://reactjs.org/docs/reconciliation.html#keys
Another possibility, is to provide some logic for when the component should update (and change the ad) or not with the shouldComponentUpdate() lifecycle method
https://reactjs.org/docs/react-component.html#shouldcomponentupdate
I have a use case where I want to open a react application in new window whenever user clicks a button. I want to pass some props to the react application. Presently I am sending the props via appending them to URL.
Example
Let's say my application is accessible at lomoto/car. I am currently sending parameters via lomoto/car/value1/value2. I am accessing these properties via props.match.params.prop1 and props.match.params.prop2. I am using react-router v4 for routing.
Is there any other recommended way of achieving this?
You can save the state to the browser's local storage and then access it from any tab.
In this egg head video Dan Abramov explains how to make use of the browser's local storage for redux.
You can use a similar approach with or without redux.