loadGoogleMaps React component

September 18, 2017 | Javascript, Personal Projects, React

loadGoogleMaps is a small React component which loads Google Maps in a manner more consistent with the React ecosystem. I used a few different npm packages prior to this and they seemed to be overly complex.

Instead of hardcoding the Google Maps url into our index.html file, we set our API key somewhere in our app ( in a constants file, perhaps ) and pass that value to the loadGoogleMaps function, along with an array of Google Maps libraries we want to load.

Call it when our application mounts for the first time:

And presto! You’re all set to start using Google Maps in your React app. Currently available as a Gist here and you’ll need to install the little-loader and query-string packages manually but I might refactor into an actual npm package at some point.

 

Loading and Compiling SASS in React

I’ve been looking for a good solution for using SASS in a create-react-app. Previously I was using node-sass-chokidar for watching my scss files and compiling them, but I found it to be unintuitive and difficult to use with my file structure. I decided to build my own workflow for easily loading and compiling SASS files in my React projects using my favorite build tool, Gulp.

This article assumes a familiarity with Gulp and create-react-app and have already set up a project.

Let’s check out how our Gulpfile works.

Our first task, sass,  compiles and minifies our master stylesheet into a css file.

The next task, loadSass,  recursively examines all of the folders in our specified path pattern and collects the path names of any file ending with .scss. We pass the property {read: false} because we don’t need the contents of each file – only the path name.  Then, for each file path, we transform it into a string, like @import "./src/app/components/friend/friend.scss";. We then inject that value into our stylesheet – more on that later.

The last task watches for changes in our sass path and calls the compiling task sass. We could also call our loadSass function here but it would be unnecessary to re-inject our files every time we make a change. Instead, we run  loadSass manually in our terminal when we’ve added new files or moved files around.*

Next, we’ll need to configure our stylesheet to work with gulp-inject:

Next, we’ll need to modify our project’s package.json file to use our new scripts. I ejected my config files and scripts but with some tweaking you should be able to get the following code to work in your package.json file.

We’ve added two new scripts to run: watch-scssand build-scss. The first  loads our SCSS files on boot, and auto compiles our project’s SCSS files during development. The second loads and compiles our SCSS before running the create-react-app build processes.

You won’t need to require the SCSS stylesheet in your component files but I do recommend storing them in the same folder.

Another great thing about this method is that it doesn’t produce any unnecessary CSS files – everything is loaded into a master stylesheet and then that stylesheet is compiled into CSS. No more @imports all over the place either!

And that’s all there is to it! Enjoy a simple way to keep your SCSS files organized and compile them easily during your next React project.

*In another project, I did add support for injecting new files into the stylesheet when a new file is added. I’ll link to that in another post.