How to add js to React components in Gatsby?
up vote
0
down vote
favorite
I'm trying to add the scroll function in script tags to this header component in Gatsby. I know it could work in html and not in react, but what is the right way to do it? Thanks!
import React from 'react'
import Link from 'gatsby-link'
import './header.css'
const Header = () => (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src=require('../img/logo_nav.png') width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
export default Header
<script>
$(window).scroll(function ()
if ($(window).scrollTop() > 10)
$('.Header').addClass('floatingHeader');
else
$('.Header').removeClass('floatingHeader');
</script>reactjs gatsby
asked Nov 10 at 22:29
Muchao
31
add a comment |
up vote
0
down vote
favorite
I'm trying to add the scroll function in script tags to this header component in Gatsby. I know it could work in html and not in react, but what is the right way to do it? Thanks!
import React from 'react'
import Link from 'gatsby-link'
import './header.css'
const Header = () => (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src=require('../img/logo_nav.png') width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
export default Header
<script>
$(window).scroll(function ()
if ($(window).scrollTop() > 10)
$('.Header').addClass('floatingHeader');
else
$('.Header').removeClass('floatingHeader');
</script>reactjs gatsby
asked Nov 10 at 22:29
Muchao
31
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm trying to add the scroll function in script tags to this header component in Gatsby. I know it could work in html and not in react, but what is the right way to do it? Thanks!
import React from 'react'
import Link from 'gatsby-link'
import './header.css'
const Header = () => (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src=require('../img/logo_nav.png') width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
export default Header
<script>
$(window).scroll(function ()
if ($(window).scrollTop() > 10)
$('.Header').addClass('floatingHeader');
else
$('.Header').removeClass('floatingHeader');
</script>reactjs gatsby
asked Nov 10 at 22:29
Muchao
31
I'm trying to add the scroll function in script tags to this header component in Gatsby. I know it could work in html and not in react, but what is the right way to do it? Thanks!
import React from 'react'
import Link from 'gatsby-link'
import './header.css'
const Header = () => (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src=require('../img/logo_nav.png') width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
export default Header
<script>
$(window).scroll(function ()
if ($(window).scrollTop() > 10)
$('.Header').addClass('floatingHeader');
else
$('.Header').removeClass('floatingHeader');
</script>import React from 'react'
import Link from 'gatsby-link'
import './header.css'
const Header = () => (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src=require('../img/logo_nav.png') width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
export default Header
<script>
$(window).scroll(function ()
if ($(window).scrollTop() > 10)
$('.Header').addClass('floatingHeader');
else
$('.Header').removeClass('floatingHeader');
</script>import React from 'react'
import Link from 'gatsby-link'
import './header.css'
const Header = () => (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src=require('../img/logo_nav.png') width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
export default Header
<script>
$(window).scroll(function ()
if ($(window).scrollTop() > 10)
$('.Header').addClass('floatingHeader');
else
$('.Header').removeClass('floatingHeader');
</script>reactjs gatsby
reactjs gatsby
asked Nov 10 at 22:29
Muchao
31
asked Nov 10 at 22:29
Muchao
31
asked Nov 10 at 22:29
Muchao
31
asked Nov 10 at 22:29
Muchao
31
asked Nov 10 at 22:29
Muchao
31
31
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
If you want scripts to load before the DOM is ready you can add your scripts inside html.js file.
From the Gatsby docs:
Gatsby uses a React component to server render the and other
parts of the HTML outside of the core Gatsby application.
Read more about it here.
In your case, what you can do is to write your script inside the componentDidMount react lifecycle method, because you need access to the DOM (as you're using jQuery there) you need to run the script after the body has been loaded, so placing your script in the <head> won't work, you need to add it inside the componentDidMount method by first making your component a class component to get access to the react lifecycle methods.
import React from 'react'
import Link from 'gatsby-link'
import $ from 'jquery'
import './header.css'
class Header extends React.Component
componentDidMount ()
$(window).scroll(function ()
if ($(window).scrollTop() > 10)
$('.Header').addClass('floatingHeader');
else
$('.Header').removeClass('floatingHeader');
)
render ()
return (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src=require('../img/logo_nav.png') width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
export default Header
You can also use a Gatsby layout template like the gatsby-starter-blog project and put your script at the bottom of the children call as a <script>Your script</script> and it will be available in all your pages, same as using the html.js file but since you need access to the DOM you need to put it inside the body for your script to work (more info about Gatsby layouts here).
answered Nov 10 at 22:48
bntzio
574520
Thanks! But it shows that the last } of the componentDidMount method is an unexpected token
– Muchao
Nov 10 at 23:16
I updated the answer, you had a typo in your script function :)
– bntzio
Nov 10 at 23:31
Thanks so much it works!
– Muchao
Nov 11 at 20:23
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
If you want scripts to load before the DOM is ready you can add your scripts inside html.js file.
From the Gatsby docs:
Gatsby uses a React component to server render the and other
parts of the HTML outside of the core Gatsby application.
Read more about it here.
In your case, what you can do is to write your script inside the componentDidMount react lifecycle method, because you need access to the DOM (as you're using jQuery there) you need to run the script after the body has been loaded, so placing your script in the <head> won't work, you need to add it inside the componentDidMount method by first making your component a class component to get access to the react lifecycle methods.
import React from 'react'
import Link from 'gatsby-link'
import $ from 'jquery'
import './header.css'
class Header extends React.Component
componentDidMount ()
$(window).scroll(function ()
if ($(window).scrollTop() > 10)
$('.Header').addClass('floatingHeader');
else
$('.Header').removeClass('floatingHeader');
)
render ()
return (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src=require('../img/logo_nav.png') width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
export default Header
You can also use a Gatsby layout template like the gatsby-starter-blog project and put your script at the bottom of the children call as a <script>Your script</script> and it will be available in all your pages, same as using the html.js file but since you need access to the DOM you need to put it inside the body for your script to work (more info about Gatsby layouts here).
answered Nov 10 at 22:48
bntzio
574520
Thanks! But it shows that the last } of the componentDidMount method is an unexpected token
– Muchao
Nov 10 at 23:16
I updated the answer, you had a typo in your script function :)
– bntzio
Nov 10 at 23:31
Thanks so much it works!
– Muchao
Nov 11 at 20:23
add a comment |
up vote
0
down vote
accepted
If you want scripts to load before the DOM is ready you can add your scripts inside html.js file.
From the Gatsby docs:
Gatsby uses a React component to server render the and other
parts of the HTML outside of the core Gatsby application.
Read more about it here.
In your case, what you can do is to write your script inside the componentDidMount react lifecycle method, because you need access to the DOM (as you're using jQuery there) you need to run the script after the body has been loaded, so placing your script in the <head> won't work, you need to add it inside the componentDidMount method by first making your component a class component to get access to the react lifecycle methods.
import React from 'react'
import Link from 'gatsby-link'
import $ from 'jquery'
import './header.css'
class Header extends React.Component
componentDidMount ()
$(window).scroll(function ()
if ($(window).scrollTop() > 10)
$('.Header').addClass('floatingHeader');
else
$('.Header').removeClass('floatingHeader');
)
render ()
return (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src=require('../img/logo_nav.png') width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
export default Header
You can also use a Gatsby layout template like the gatsby-starter-blog project and put your script at the bottom of the children call as a <script>Your script</script> and it will be available in all your pages, same as using the html.js file but since you need access to the DOM you need to put it inside the body for your script to work (more info about Gatsby layouts here).
answered Nov 10 at 22:48
bntzio
574520
Thanks! But it shows that the last } of the componentDidMount method is an unexpected token
– Muchao
Nov 10 at 23:16
I updated the answer, you had a typo in your script function :)
– bntzio
Nov 10 at 23:31
Thanks so much it works!
– Muchao
Nov 11 at 20:23
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
If you want scripts to load before the DOM is ready you can add your scripts inside html.js file.
From the Gatsby docs:
Gatsby uses a React component to server render the and other
parts of the HTML outside of the core Gatsby application.
Read more about it here.
In your case, what you can do is to write your script inside the componentDidMount react lifecycle method, because you need access to the DOM (as you're using jQuery there) you need to run the script after the body has been loaded, so placing your script in the <head> won't work, you need to add it inside the componentDidMount method by first making your component a class component to get access to the react lifecycle methods.
import React from 'react'
import Link from 'gatsby-link'
import $ from 'jquery'
import './header.css'
class Header extends React.Component
componentDidMount ()
$(window).scroll(function ()
if ($(window).scrollTop() > 10)
$('.Header').addClass('floatingHeader');
else
$('.Header').removeClass('floatingHeader');
)
render ()
return (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src=require('../img/logo_nav.png') width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
export default Header
You can also use a Gatsby layout template like the gatsby-starter-blog project and put your script at the bottom of the children call as a <script>Your script</script> and it will be available in all your pages, same as using the html.js file but since you need access to the DOM you need to put it inside the body for your script to work (more info about Gatsby layouts here).
answered Nov 10 at 22:48
bntzio
574520
If you want scripts to load before the DOM is ready you can add your scripts inside html.js file.
From the Gatsby docs:
Gatsby uses a React component to server render the and other
parts of the HTML outside of the core Gatsby application.
Read more about it here.
In your case, what you can do is to write your script inside the componentDidMount react lifecycle method, because you need access to the DOM (as you're using jQuery there) you need to run the script after the body has been loaded, so placing your script in the <head> won't work, you need to add it inside the componentDidMount method by first making your component a class component to get access to the react lifecycle methods.
import React from 'react'
import Link from 'gatsby-link'
import $ from 'jquery'
import './header.css'
class Header extends React.Component
componentDidMount ()
$(window).scroll(function ()
if ($(window).scrollTop() > 10)
$('.Header').addClass('floatingHeader');
else
$('.Header').removeClass('floatingHeader');
)
render ()
return (
<div className='Header'>
<div className='HeaderGroup'>
<Link to='/'><img src=require('../img/logo_nav.png') width='60' /></Link>
<Link to='/index'>Selected Works</Link>
<Link to='/uber'>Uber Thoughts</Link>
<Link to='/awards'>Awards</Link>
<Link to='/about'>About</Link>
</div>
</div>
)
export default Header
You can also use a Gatsby layout template like the gatsby-starter-blog project and put your script at the bottom of the children call as a <script>Your script</script> and it will be available in all your pages, same as using the html.js file but since you need access to the DOM you need to put it inside the body for your script to work (more info about Gatsby layouts here).
answered Nov 10 at 22:48
bntzio
574520
edited Nov 10 at 23:30
answered Nov 10 at 22:48
bntzio
574520
answered Nov 10 at 22:48
bntzio
574520
answered Nov 10 at 22:48
bntzio
574520
574520
Thanks! But it shows that the last } of the componentDidMount method is an unexpected token
– Muchao
Nov 10 at 23:16
I updated the answer, you had a typo in your script function :)
– bntzio
Nov 10 at 23:31
Thanks so much it works!
– Muchao
Nov 11 at 20:23
add a comment |
Thanks! But it shows that the last } of the componentDidMount method is an unexpected token
– Muchao
Nov 10 at 23:16
I updated the answer, you had a typo in your script function :)
– bntzio
Nov 10 at 23:31
Thanks so much it works!
– Muchao
Nov 11 at 20:23
Thanks! But it shows that the last } of the componentDidMount method is an unexpected token
– Muchao
Nov 10 at 23:16
Thanks! But it shows that the last } of the componentDidMount method is an unexpected token
– Muchao
Nov 10 at 23:16
I updated the answer, you had a typo in your script function :)
– bntzio
Nov 10 at 23:31
I updated the answer, you had a typo in your script function :)
– bntzio
Nov 10 at 23:31
Thanks so much it works!
– Muchao
Nov 11 at 20:23
Thanks so much it works!
– Muchao
Nov 11 at 20:23
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53244062%2fhow-to-add-js-to-react-components-in-gatsby%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
