Develop Reference

Where do I put "main.js" file in Gatsby project?

I have a function that grabs an element and adds the class "is-open" in order to toggle an accordion. I have put this function in my "main.js".
In my FAQ component, this function needs to be called when a user clicks the accordion bar.
My question is: How do I import this main.js file within my Gatsby.js / React project?
I tried in the index or the component itself. But it is only called once I make changes to the main.js file. Obviously, I want it to be called right away when the page loads up.
This is the function within my main.js file:
const accordionEl = document.getElementsByClassName("faq-module--accordion-title--2zVOe")
if (accordionEl.length) {
for (let i = 0; i < accordionEl.length; i++) {
accordionEl[i].addEventListener("click", function() {
this.parentNode.classList.toggle("is-open")
const panel = this.nextElementSibling
if (panel.style.maxHeight) {
panel.style.maxHeight = null
} else {
panel.style.maxHeight = `${panel.scrollHeight}px`
}
})
}
}
Like I said, I have tried to add it like so in my FAQ component:
import "../js/main..js"
I have also tried to add it in index.html with tags.

You can put this in your footer (or some place that always loads):
<script src={`path/to/main.js`}></script>
Use the path to the file of the BUILT version. So you should probably put the script in "static/js/", and you should be able to import it from there.
But this is not really how you want to use Gatsby. Gatsby is built upon React, so for the reactive JavaScript, you should really be using React. It can't predict what the state of the DOM is if you start updating it behind its back. Furthermore this should be really easy to recreate in React with a simple onClick handler.

How to make a React Component change global CSS

I'm building a Chrome Extension with react-redux, and I want to inject CSS globally with logic.
I trying to do this by making a component import a global CSS file, but it's not working.
styler.js
import React, { Component } from 'react';
require('./styler.css');
class Styler extends Component {
render(){
return (
<div />
)
}
}
export default Styler;
styler.css
:global(.myclass) {
background-color: red;
}
I just get an import error. Is there a way for a react project (or component) to inject CSS globally?

You can use examples of the repo: https://github.com/orbitbot/chrome-extensions-examples also https://developer.chrome.com/extensions/samples
Example of changing css by js:
chrome.tabs.executeScript(null,
{code: "document.body.style.backgroundColor="'"red"'"});
Or using insertCSS: https://developer.chrome.com/extensions/tabs#method-insertCSS
example of usage: Insert CSS from Chrome Extension

window.scrollTo(0, 240) not working with componentDidMount()

I am building a website using Reactjs and Gatsby.
My problem is that I have window.scrollTo(0, 240) in componentDidMount(), if I refresh the site it works well. But when I use the Gatsby Link component, the website does not go to the set position.
I have also put a console.log which works fine to see if the function runs.
Furthermore I have run the window.scrollTo(0,240) directly in the browser console which also works fine.
import React, { Component} from 'react'
import HeroHeader from "../components/HeroHeader"
import NavBar from "../components/NavBar"
import TopFooter from "../components/TopFooter"
import BottomFooter from "../components/BottomFooter"
import MainContent from "../components/MainContent"
class WebPage extends Component {
componentDidMount() {
window.scrollTo(0, 240)
console.log("Webpage Mounted")
}
render() {
// window.scrollTo(0, 240)
return(
<>
<HeroHeader />
<NavBar />
<MainContent>
{this.props.children}
</MainContent>
<TopFooter />
<BottomFooter />
</>
)
}
}
export default WebPage
Expecting to have each webpage scroll upon running the componentDidMount().

componentDidMount executes only works on initial render, you should use componentDidUpdate which will execute on every re-render,
componentDidUpdate(){
window.scrollTo(0, 240)
}

Found out it is possible to disable the window.scroll(0, 0) apparently built into Gatsby, using this guide: https://www.gatsbyjs.org/packages/gatsby-plugin-transitions/?=gatsby-plugin-transitions
Install the transition plugin:
npm install --save yarn add gatsby-plugin-transitions gatsby-plugin-layout react-spring react react-dom
(Not actually sure how many of them is actually needed to simply disable the auto scroll).
With this code in gatsby-browser.js:
exports.shouldUpdateScroll = () => {
return false;
};

Webpack treeshaking with ~/components/ui/index.js and Vue.js

Hello I have a index in a UI module within my components exporting all components in that folder like so:
~/components/ui/index.js:
import Button from './Button';
import Footer from './Footer';
export { Button, Footer }
And I use it in some page like so:
import { Button } from '~/components/ui';
export default {
components: {
Button,
Footer: () => import('~/components/ui/Footer')
}
}
Now ideally, the Footer component should be split in a different chunk, and only be loaded if needed. This works if I remove it from the exports of ~/components/ui/index.js, like so:
~/components/ui/index.js:
import Button from './Button';
//import Footer from './Footer';
export { Button, /*Footer*/ }
Now this works. But I would like to keep it in the index. And use webpack treeshaking to eliminate the Footer from the default bundle.
How can I achieve this?

react-s-alert, alerts won't popup

So i got a meteor setup with a trello like GUI, based on blaze but with react components and i want to use this library https://www.npmjs.com/package/react-s-alert for showing some popups (feel free to suggest react alternatives).
So i did this, inside a header bar inside client/components/main/header.js:
import React from 'react';
import Alert from 'react-s-alert';
import 'react-s-alert/dist/s-alert-default.css';
import 'react-s-alert/dist/s-alert-css-effects/slide.css';
...
Template.header.events({
'click .js-create-board': Popup.open('createBoard'),
'click .js-alert'() {
Alert.info('Test message')
},
});
But when the function is called, nothing happens..
Anyone can help?

I think you haven't added its initializer component in your main component.
Place sAlert component in your main app renderer component also.
<Alert stack={{limit: 3}} />