Maintaining/accessing global state in Gatsby site











up vote
0
down vote

favorite












I am currently trying to implement a fairly simple feature in a Gatsby JS driven site, which was built by someone else and am facing the following problem:



The page currently darkens the background when a modal is opened, I would like to have the background blur instead though. In order to achieve the darker background, the component for the modal includes a div, with fixed position, which fills the window, the css of which is as follows:



.background_fader {

  display: block;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0,0,0,0.2);

  cursor: pointer;

}


I have tried using filter: blur(20px) instead of the background-color, but to no avail. It appears, that even when I change the z-index of the div, I am not able to blur the background, but would rather have to add the filter property at the wrapper of the page, i.e. much higher up in the hierarchy.



I have some experience with react and almost none with Gatsby, so please excuse if this question is simple/ rooted in a fundamental misconception.
What I have dealt with so far, were pages which used Redux as a centralized state and the much wider question which arose in implementing the blurring is this:



How do I add a state to the root-component of the Gatsby page in order to pass relevant aspects down to child components and thereby rerender the page?



After doing some research, I came to the conclusion, that it should be possible to use the wrapRootElement function from gatsby-browser.js in order to define a state at the root of the app, but I am having trouble implementing this, because the only props I seem to be able to access in the "root" component, which is generated from layouts/index.js are the data retrieved from Graphql.



Currently the layouts/index.js looks like this: 



import React from 'react';

import graphql from 'graphql';

import Helmet from 'react-helmet';

import classNames from 'classnames';



// import 'bootstrap/dist/css/bootstrap.min.css';

import './reset.css';

import '../components/styleguide/index.less';

import Feedback from '../components/feedback';

import Navbar from '../components/Nav';

import Footer from '../components/footer';

import Subscribe from '../components/Subscribe';

import './index.less';



export default ({

  children, location, data: {

    FooterSettings: { edges: [{ node: { frontmatter: footerData } }] },

    NavbarSettings: { edges: [{ node: { frontmatter: navbarSettings } }] },

    HomepageSettings: { edges: [{ node: { frontmatter: homepageSettings } }] }

  }

}) => {

  const wrapperClasses = classNames(

    'page-wrapper',

    {

      'page-wrapper--custom': location.pathname.split('/')[1]

    },

    `page-wrapper--${location.pathname.split('/')[1]}`

  );

  return (

    <div className={wrapperClasses}>

      <Helmet>

        <html lang="uk" />

      </Helmet>

      <Navbar location={location.pathname} className={location.pathname.split('/')[1]} {...navbarSettings} />

      <Feedback

        location={location}

        email={homepageSettings.contactFormEmail}

        title={homepageSettings.contactFormTitle}

      />

      {children()}

      <Subscribe email={homepageSettings.contactFormEmail} className={location.pathname.split('/')[1]} />

      <Footer {...footerData} {...navbarSettings} className={location.pathname.split('/')[1]} />

    </div>

  );

};



export const pageQuery = // very long query which appears to be sound


So, returning to my question:



How do can I dynamically add or remove a class-name to wrapperClasses based on a state that I pass to the <Feedback component and where would I instantiate this state to reoad the entire page, when it changes.



Thanks in advance folks.






reactjs jsx gatsby







share|improve this question


























    up vote
    0
    down vote

    favorite












    I am currently trying to implement a fairly simple feature in a Gatsby JS driven site, which was built by someone else and am facing the following problem:



    The page currently darkens the background when a modal is opened, I would like to have the background blur instead though. In order to achieve the darker background, the component for the modal includes a div, with fixed position, which fills the window, the css of which is as follows:



    .background_fader {
    
  display: block;
    
  position: fixed;
    
  top: 0;
    
  left: 0;
    
  width: 100%;
    
  height: 100%;
    
  background-color: rgba(0,0,0,0.2);
    
  cursor: pointer;
    
}


    I have tried using filter: blur(20px) instead of the background-color, but to no avail. It appears, that even when I change the z-index of the div, I am not able to blur the background, but would rather have to add the filter property at the wrapper of the page, i.e. much higher up in the hierarchy.



    I have some experience with react and almost none with Gatsby, so please excuse if this question is simple/ rooted in a fundamental misconception.
    What I have dealt with so far, were pages which used Redux as a centralized state and the much wider question which arose in implementing the blurring is this:



    How do I add a state to the root-component of the Gatsby page in order to pass relevant aspects down to child components and thereby rerender the page?



    After doing some research, I came to the conclusion, that it should be possible to use the wrapRootElement function from gatsby-browser.js in order to define a state at the root of the app, but I am having trouble implementing this, because the only props I seem to be able to access in the "root" component, which is generated from layouts/index.js are the data retrieved from Graphql.



    Currently the layouts/index.js looks like this: 



    import React from 'react';
    
import graphql from 'graphql';
    
import Helmet from 'react-helmet';
    
import classNames from 'classnames';
    

    
// import 'bootstrap/dist/css/bootstrap.min.css';
    
import './reset.css';
    
import '../components/styleguide/index.less';
    
import Feedback from '../components/feedback';
    
import Navbar from '../components/Nav';
    
import Footer from '../components/footer';
    
import Subscribe from '../components/Subscribe';
    
import './index.less';
    

    
export default ({
    
  children, location, data: {
    
    FooterSettings: { edges: [{ node: { frontmatter: footerData } }] },
    
    NavbarSettings: { edges: [{ node: { frontmatter: navbarSettings } }] },
    
    HomepageSettings: { edges: [{ node: { frontmatter: homepageSettings } }] }
    
  }
    
}) => {
    
  const wrapperClasses = classNames(
    
    'page-wrapper',
    
    {
    
      'page-wrapper--custom': location.pathname.split('/')[1]
    
    },
    
    `page-wrapper--${location.pathname.split('/')[1]}`
    
  );
    
  return (
    
    <div className={wrapperClasses}>
    
      <Helmet>
    
        <html lang="uk" />
    
      </Helmet>
    
      <Navbar location={location.pathname} className={location.pathname.split('/')[1]} {...navbarSettings} />
    
      <Feedback
    
        location={location}
    
        email={homepageSettings.contactFormEmail}
    
        title={homepageSettings.contactFormTitle}
    
      />
    
      {children()}
    
      <Subscribe email={homepageSettings.contactFormEmail} className={location.pathname.split('/')[1]} />
    
      <Footer {...footerData} {...navbarSettings} className={location.pathname.split('/')[1]} />
    
    </div>
    
  );
    
};
    

    
export const pageQuery = // very long query which appears to be sound


    So, returning to my question:



    How do can I dynamically add or remove a class-name to wrapperClasses based on a state that I pass to the <Feedback component and where would I instantiate this state to reoad the entire page, when it changes.



    Thanks in advance folks.






    reactjs jsx gatsby







    share|improve this question
























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I am currently trying to implement a fairly simple feature in a Gatsby JS driven site, which was built by someone else and am facing the following problem:



      The page currently darkens the background when a modal is opened, I would like to have the background blur instead though. In order to achieve the darker background, the component for the modal includes a div, with fixed position, which fills the window, the css of which is as follows:



      .background_fader {
      
  display: block;
      
  position: fixed;
      
  top: 0;
      
  left: 0;
      
  width: 100%;
      
  height: 100%;
      
  background-color: rgba(0,0,0,0.2);
      
  cursor: pointer;
      
}


      I have tried using filter: blur(20px) instead of the background-color, but to no avail. It appears, that even when I change the z-index of the div, I am not able to blur the background, but would rather have to add the filter property at the wrapper of the page, i.e. much higher up in the hierarchy.



      I have some experience with react and almost none with Gatsby, so please excuse if this question is simple/ rooted in a fundamental misconception.
      What I have dealt with so far, were pages which used Redux as a centralized state and the much wider question which arose in implementing the blurring is this:



      How do I add a state to the root-component of the Gatsby page in order to pass relevant aspects down to child components and thereby rerender the page?



      After doing some research, I came to the conclusion, that it should be possible to use the wrapRootElement function from gatsby-browser.js in order to define a state at the root of the app, but I am having trouble implementing this, because the only props I seem to be able to access in the "root" component, which is generated from layouts/index.js are the data retrieved from Graphql.



      Currently the layouts/index.js looks like this: 



      import React from 'react';
      
import graphql from 'graphql';
      
import Helmet from 'react-helmet';
      
import classNames from 'classnames';
      

      
// import 'bootstrap/dist/css/bootstrap.min.css';
      
import './reset.css';
      
import '../components/styleguide/index.less';
      
import Feedback from '../components/feedback';
      
import Navbar from '../components/Nav';
      
import Footer from '../components/footer';
      
import Subscribe from '../components/Subscribe';
      
import './index.less';
      

      
export default ({
      
  children, location, data: {
      
    FooterSettings: { edges: [{ node: { frontmatter: footerData } }] },
      
    NavbarSettings: { edges: [{ node: { frontmatter: navbarSettings } }] },
      
    HomepageSettings: { edges: [{ node: { frontmatter: homepageSettings } }] }
      
  }
      
}) => {
      
  const wrapperClasses = classNames(
      
    'page-wrapper',
      
    {
      
      'page-wrapper--custom': location.pathname.split('/')[1]
      
    },
      
    `page-wrapper--${location.pathname.split('/')[1]}`
      
  );
      
  return (
      
    <div className={wrapperClasses}>
      
      <Helmet>
      
        <html lang="uk" />
      
      </Helmet>
      
      <Navbar location={location.pathname} className={location.pathname.split('/')[1]} {...navbarSettings} />
      
      <Feedback
      
        location={location}
      
        email={homepageSettings.contactFormEmail}
      
        title={homepageSettings.contactFormTitle}
      
      />
      
      {children()}
      
      <Subscribe email={homepageSettings.contactFormEmail} className={location.pathname.split('/')[1]} />
      
      <Footer {...footerData} {...navbarSettings} className={location.pathname.split('/')[1]} />
      
    </div>
      
  );
      
};
      

      
export const pageQuery = // very long query which appears to be sound


      So, returning to my question:



      How do can I dynamically add or remove a class-name to wrapperClasses based on a state that I pass to the <Feedback component and where would I instantiate this state to reoad the entire page, when it changes.



      Thanks in advance folks.






      reactjs jsx gatsby







      share|improve this question













      I am currently trying to implement a fairly simple feature in a Gatsby JS driven site, which was built by someone else and am facing the following problem:



      The page currently darkens the background when a modal is opened, I would like to have the background blur instead though. In order to achieve the darker background, the component for the modal includes a div, with fixed position, which fills the window, the css of which is as follows:



      .background_fader {
      
  display: block;
      
  position: fixed;
      
  top: 0;
      
  left: 0;
      
  width: 100%;
      
  height: 100%;
      
  background-color: rgba(0,0,0,0.2);
      
  cursor: pointer;
      
}


      I have tried using filter: blur(20px) instead of the background-color, but to no avail. It appears, that even when I change the z-index of the div, I am not able to blur the background, but would rather have to add the filter property at the wrapper of the page, i.e. much higher up in the hierarchy.



      I have some experience with react and almost none with Gatsby, so please excuse if this question is simple/ rooted in a fundamental misconception.
      What I have dealt with so far, were pages which used Redux as a centralized state and the much wider question which arose in implementing the blurring is this:



      How do I add a state to the root-component of the Gatsby page in order to pass relevant aspects down to child components and thereby rerender the page?



      After doing some research, I came to the conclusion, that it should be possible to use the wrapRootElement function from gatsby-browser.js in order to define a state at the root of the app, but I am having trouble implementing this, because the only props I seem to be able to access in the "root" component, which is generated from layouts/index.js are the data retrieved from Graphql.



      Currently the layouts/index.js looks like this: 



      import React from 'react';
      
import graphql from 'graphql';
      
import Helmet from 'react-helmet';
      
import classNames from 'classnames';
      

      
// import 'bootstrap/dist/css/bootstrap.min.css';
      
import './reset.css';
      
import '../components/styleguide/index.less';
      
import Feedback from '../components/feedback';
      
import Navbar from '../components/Nav';
      
import Footer from '../components/footer';
      
import Subscribe from '../components/Subscribe';
      
import './index.less';
      

      
export default ({
      
  children, location, data: {
      
    FooterSettings: { edges: [{ node: { frontmatter: footerData } }] },
      
    NavbarSettings: { edges: [{ node: { frontmatter: navbarSettings } }] },
      
    HomepageSettings: { edges: [{ node: { frontmatter: homepageSettings } }] }
      
  }
      
}) => {
      
  const wrapperClasses = classNames(
      
    'page-wrapper',
      
    {
      
      'page-wrapper--custom': location.pathname.split('/')[1]
      
    },
      
    `page-wrapper--${location.pathname.split('/')[1]}`
      
  );
      
  return (
      
    <div className={wrapperClasses}>
      
      <Helmet>
      
        <html lang="uk" />
      
      </Helmet>
      
      <Navbar location={location.pathname} className={location.pathname.split('/')[1]} {...navbarSettings} />
      
      <Feedback
      
        location={location}
      
        email={homepageSettings.contactFormEmail}
      
        title={homepageSettings.contactFormTitle}
      
      />
      
      {children()}
      
      <Subscribe email={homepageSettings.contactFormEmail} className={location.pathname.split('/')[1]} />
      
      <Footer {...footerData} {...navbarSettings} className={location.pathname.split('/')[1]} />
      
    </div>
      
  );
      
};
      

      
export const pageQuery = // very long query which appears to be sound


      So, returning to my question:



      How do can I dynamically add or remove a class-name to wrapperClasses based on a state that I pass to the <Feedback component and where would I instantiate this state to reoad the entire page, when it changes.



      Thanks in advance folks.






      reactjs jsx gatsby




      reactjs jsx gatsby






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 18 at 20:45









      MTTI

      18418




      18418





























          active

          oldest

          votes











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53365278%2fmaintaining-accessing-global-state-in-gatsby-site%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown






























          active

          oldest

          votes













          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes
















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53365278%2fmaintaining-accessing-global-state-in-gatsby-site%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          -

          Popular posts from this blog

          Costa Masnaga

          Image
          .mw-parser-output .avviso .mbox-text-div>div,.mw-parser-output .avviso .mbox-text-full-div>div{font-size:90%}.mw-parser-output .avviso .mbox-image div{width:52px}.mw-parser-output .avviso .mbox-text-full-div .hide-when-compact{display:block} Questa voce o sezione sull'argomento Lombardia non cita le fonti necessarie o quelle presenti sono insufficienti . Puoi migliorare questa voce aggiungendo citazioni da fonti attendibili secondo le linee guida sull'uso delle fonti. Segui i suggerimenti del progetto di riferimento. Costa Masnaga comune Localizzazione Stato   Italia Regione Lombardia Provincia Lecco Amministrazione Sindaco Sabina Panzeri (Al centro il cittadino) dall'08/06/2009 Territorio Coordinate 45°46′N 9°17′E  /  45.766667°N 9.283333°E 45.766667; 9.283333  ( Costa Masnaga ) Coordinate: 45°46′N 9°17′E  /  45.766667°N 9.283333°E 45.766667; 9.283333  ( Costa Masnaga ) Altitudine 318 m s.l.m...
          Read more

          Fotorealismo

          Image
          Guerrino Boatto, Venice's St. Barnaba Church and canal Il fotorealismo è un genere di pittura basato sull'uso di una o più fotografie dalle quali l'artista prende le informazioni necessarie da utilizzare poi nel processo della creazione dell'opera, in genere ad olio o ad acrilico, al fine di avere un aspetto finale il più simile possibile alla fotografia. Indice 1 Storia 2 Lista dei fotorealisti 3 Note 4 Voci correlate 5 Altri progetti Storia | Il fotorealismo è un movimento che nasce negli Stati Uniti d'America alla fine degli anni sessanta [1] sulla scia della Pop Art [2] [3] [4] , e insieme condividono il carattere reazionario verso la travolgente ascesa dei media, che alla metà del ventesimo secolo si trasforma in un fenomeno di massa talmente imponente da minacciare il valore dell'immagine nell'arte. [5] [6] Ne consegue così che, colto il gesto d'inizio che fu della Pop Art, i fotorealisti aprono ad un ...
          Read more

          Sidney Franklin

          Image
          Questa voce sull'argomento registi statunitensi è solo un abbozzo . Contribuisci a migliorarla secondo le convenzioni di Wikipedia. Sidney Franklin, foto di Carl Van Vechten Oscar alla memoria Irving G. Thalberg 1943 Sidney Franklin , all'anagrafe Sidney Arnold Franklin , (San Francisco, 21 marzo 1893 – Santa Monica, 18 maggio 1972), è stato un regista, produttore cinematografico e attore statunitense. Il 20 giugno 1963, si sposò con l'attrice australiana Enid Bennett. Il matrimonio durò fino alla morte dell'attrice, il 14 maggio 1969 [1] Indice 1 Filmografia 1.1 Regista 1.2 Aiuto regia (parziale) 1.3 Produttore 1.4 Attore (parziale) 2 Note 3 Altri progetti 4 Collegamenti esterni Filmografia | Regista | The Baby , co-regia Chester M. Franklin (1915) The Rivals , co-regia Chester M. Franklin (1915) Little Dick's First Case , co-regia Chester M. Franklin (1915) Her Filmland Hero , co-...
          Read more