• Standard CSS
• Inline Styles
• CSS Modules
• CSS-in-JS

Now let’s take a closer look at each one of these.

Standard CSS

This is the traditional and the most common way of writing CSS. You create a style.css file, add all of your styles inside of it, then import the stylesheet and reference the styles within your JSX via className or id attributes.

Note that you don’t have to limit your styles within a single stylesheet, you can just as well split them into multiple files and place them next to the components which they are supposed to target.

Also note that you can keep on using your everyday CSS libraries and frameworks such as SASS, LESS, Bootstrap, Semantic UI, etc., as well, React doesn’t limit you in any way.

Inline Styles

Inline styles refer to writing CSS directly inside of HTML markup via the style attribute. In React, using JSX, this looks like this:

<p style={{color: "red"}}>Hello World</p>

Inline styles are probably the most limited approach in terms of styling full blown applications since they cannot make use of all of the CSS features such as pseudo selectors, animations and media queries.

In practise they are mostly used for basic style modifications such as color toggling based on a condition, but I have also heard of people and even companies using this as their sole styling mechanism.

(Be aware that, arguably, inline styles can also be considered as part of CSS-in-JS, because technically you do write them inside of JS files with React. The reason I chose to put them into their own category was because CSS-in-JS libraries are typically more complex than just writing styles inside of a style attribute — they instead introduce some sort of a higher level abstraction as you will see in the CSS-in-JS section.)

CSS Modules

With CSS modules you create a CSS file for every type of component that you want to style the same way that you might do with the “Standard CSS” option, however the difference here is that with CSS modules the styles are scoped locally which means that unlike “Standard CSS” they don’t leak into other components.

The styles being locally scoped also means that you can forget about implementing your own local scoping strategies or following methodologies such as BEM which require you to manually create and type out long class or id names.

How to use within React:

Use css-loader inside of your webpack.config with modules property set to true, or download a complete library such as css-modules, once setup use as follows:

• create a CSS file for whatever components you want to style
• write your CSS
• import this CSS file inside of the target components
• reference these styles within your components via their className and id attributes

How are CSS Modules implemented behind the scenes?

CSS Modules work by taking your CSS files and running them through a CSS Module compiler which does two things:

• modifies the class and/or id names inside of your CSS files to make them unique
• produces a JS file containing the mapping between the newly generated names and the old names

Hence why you can use named imports with CSS modules — you are not actually importing your CSS, but rather the JS that was produced by the CSS Module compiler.

CSS-in-JS

As the name suggests with CSS-in-JS you write your CSS inside of JavaScript files rather than CSS files, how you write and apply them, however, is very dependant on the specific CSS-in-JS library that you use.

Behind the scenes CSS-in-JS is usually implemented in one of the following three ways (or a combination of):

• via inline styles
• via a <style> element
• via a <link> element at build time by extracting styles into a CSS file

For the sake of not making the article overly long, we will only look at a single CSS-in-JS implementation, that is styled-components, which also happens to be one of the most popular implementations out there.

Before we break down how it works however, let’s first look at an example:

import React, { Component } from "react";
import styled from "styled-components";

const Wrapper = styled.div`
  max-width: 600px;
  margin: 0 auto;
`;

class HelloWorld extends Component {
  render() {
    return (
      <Wrapper>
        <p>Hello World</p>
      </Wrapper>
    );
  }
}

Let’s now break this example down. At the top we declare a variable called Wrapper and ask styled-components to create and give us back a div component consisting of the styles that we have defined within the backticks — in this case we are asking it for a div component with the following stylesmax-width: 600px; margin: 0 auto;.

We then add this Wrapper component inside of our render method and use it like a regular div.

In simple terms all that is going on here is you tell styled-components what kind of a built-in component you want and how it should be styled and styled-components give you that component back.

How do the styles get applied behind the scenes?

Styled-components rely on the<style> element, so internally you can think of it like creating and appending<style> your styles </style> to the documents head section. Also since it provides local style scoping, it takes care of generating and applying unique class names.

To better visualise this, let’s run the above code snippet and see what it produces after being added to the DOM:

...
<head>
  ...
  <style>
    /* sc-component-id: sc-bdVaJa */
    .sc-bdVaJa {}
    .brPdfu {
      max-width: 600px;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="sc-bdVaJa brPdfu">
      <p>Hello World</p>
    </div>
  </div>
</body>
...

As you can see it does look like what we expected it to look like. The only surprise is the extra empty style declaration .sc-bdVaJa {}which based on the comment right above it/* sc-component-id: sc-bdVaJa */seems to suggest that styled-components keep track of which component the styles belong to — presumably for some sort of internal performance optimisation or something along those lines.

If you like what you see, you might also want to checkout another, very similar, CSS-in-JS library called Emotion, it is very similar to styled-components but gives you the option of extracting all of your styles into a CSS file, at build time, which then get linked into the document via the <link> element. Why is this useful? Because the generated stylesheet can be cached by the browser.

For a full list of the most popular CSS-in-JS solutions see this github repository.

Finish line

Congratulations for getting to the end :), thanks for reading and hope you learned something of use. Twitter: linasmnew.

How does CSS fit into Reactjs? was originally published in HackerNoon.com on Medium, where people are continuing the conversation by highlighting and responding to this story.

Visual Example

1. Default browser behaviour when image fails due to bad signal
2. With react-graceful-image placeholder
3. With react-graceful-image disabled placeholder
4. With react-graceful-image retries — if the image fails to load, the package will gracefully re-attempt loading the image again

(note: these are not mutually exclusive, for example the default behaviour makes use of both a placeholder and retries together.)

Implementation

Placeholder

• Implemented as an SVG embedded into a Data URI — this means that you don’t have to fire an extra HTTP request in order to download the placeholder, it is embedded right into the component
• The component also provides a way to customize the placeholder by changing it’s color via the placeholderColor prop — as well as via a regular styles or className props ( note that styles passed this way are also passed to the actual image.)
• It also gives you the option of disabling the placeholder, in which case the image will not render at all until it is loaded — since the image will not get rendered until it successully loads this also means that incase the image fails it will not take its intended space on the page and you will not get a broken image icon

Retry

• Implemented using setTimeout which plays around with the delay and the desired number of retries in an attempt to gracefully re-load the image
• By default the delay in between retries doubles on every retry, this can however be modified via the retry.accumulate prop which accepts one of the following values ‘multiply’, ‘add’, ‘noop’ and updates the retry algorithm accordingly (note you can also change the delay time and retry count)

Usage Example

The below code snippet will display a blue SVG placeholder, if it is within the visible viewport then it will load the actual given image and fade it in once it is done loading. If loading the image fails, then it will retry loading the image again for a maximum of 8 times, with initial delay of 2 seconds, which will then increase to 4 seconds, then to 8 seconds, then to 16 seconds, and so on (default retry configuration). It will also apply whatever styles are defined inside of the ‘content-image’ className to the placeholder (and the image once the image loads).

import React, { Component } from 'react'
import Image from 'react-graceful-image'

class YourComponent extends Component {
  render() {
    return (
      <Image
        src="path_to_image"
        className="content-image"
        alt="My awesome image"
        placeholderColor="#0083FE"
      />
    );
  }
}

The below code snippet will display a light grey (default) SVG placeholder, if it is within the visible viewport then it will load the actual given image and fade it in once it is done loading. If loading the image fails, then it will retry loading the image again for a maximum of 15 times, with initial delay of 3 seconds which will then increase to 6 seconds, then to 9 seconds, then to 12 seconds, and so on. It will apply 20px of padding to the placeholder (and the image once the image loads).

import React, { Component } from 'react'
import Image from 'react-graceful-image'

class YourComponent extends Component {
  render() {
    return (
      <Image
        src="path_to_image"
        width="150"
        height="150"
        style={{padding: '20px'}}
        alt="My awesome image"
        retry={{count: 15, delay: 3, accumulate: 'add'}}
      />
    );
  }
}

Thanks for reading, for more usage details checkout the projects github page: https://github.com/linasmnew/react-graceful-image. You can also install it via npm using: npm install --save react-graceful-image

Introducing react-graceful-image was originally published in HackerNoon.com on Medium, where people are continuing the conversation by highlighting and responding to this story.

There’s an active issue opened regarding this on GitHub, however, no solution has yet been implemented to fix this.

In the mean time, I found a workaround that worked really well for me:

Add overflow: 'hidden' to parent <View> ‘s of all tab components which have this issue, and also to their child components which contain the particular UI that is jumping up.

I tried to make this article as general and applicable to any framework / library of your choice as possible, so hopefully it gives you a good sense of the steps that you need to go through in order to implement it in your own projects.

Note: If you don’t want to follow along and are anxious to see the code you can skip to the bottom of the article.

Outline

Before we begin, let’s define the expected behaviour:

• Initial fetch: retrieve the 5 newest items
• Subsequent fetches: retrieve the next 5 newest items

Let’s also define the test data that we’ll pretend to be fetching from firebase — using fake data will make it easier to visualise what’s going on with the queries:

// our firebase database
items: { 
   firstInsertedItem: { … }, // oldest
   SecondInsertedItem: { … }, 
   ThirdInsertedItem: { … },
   FourthInsertedItem: { … }, 
   FifthInsertedItem: { … }, 
   SixthInsertedItem: { … }, 
   SeventhInsertedItem: { … },
   EighthInsertedItem: { … }, 
   NinethInsertedItem: { … }, 
   TenthInsertedItem: { … }, // newest
 }

// in case you were wondering about the order that I put the items // in, that's just to make it easier to follow along
// and it would make no difference to us if firebase actually 
// stored those items in a different order internally

Firebase push keys

Let’s begin by introducing the magic behind firebase push keys and how they will make all of this possible.

It turns out that firebase push keys aren’t just some random sequence of characters. In fact all firebase push keys consist of a combination of timestamp and random data encoded in a modified base64 alphabet to preserve their chronological order — i.e. their insertion order.

This is a powerful feature as it will allow us to make use of firebase’s sorting queries.

Now that we defined this important characteristic we can get on with the tutorial.

First step

In order for all of our fetches, after the very first one, to return what we expect them to return we will need to keep some sort of a reference to the oldest previously fetched key.

So let’s define a variable called:

let referenceToOldestKey = ‘’;

Initial fetch

Next let’s create a query for fetching our first 5 newest inserted items:

firebase.database().ref(‘items’)
 .orderByKey()
 .limitToLast(5)
 .once(‘value’)
 .then((snapshot) => { … } )
 .catch((error) => { … } );

This query does the following:

- orderByKey sorts the items by their keys in chronological order (oldest to newest)
- limitToLast selects 5 items from the end (starting with the 5th)

The returned object will look like this:

{ 
   SixthItemFromTheEnd: { … },
   SeventhItemFromTheEnd: { … },
   EighthInsertedItem: { … },
   NinethInsertedItem: { … },
   TenthInsertedItem: { … },
 }

Next we need to reverse the order of this object so that the latest item is on top rather than on the bottom.

We have several options here, depending on how you like to manage your applications state:

• Reverse the object
• Transform the object into an array of objects and reverse the array
• Keep the object as is but make a shallow copy and reverse on the spot when displaying to the user

We’ll go with the second option, due to to it being the most popular way of storing this sort of data.

So let’s add the following to .then of our fetch function:

let arrayOfKeys = Object.keys(snapshot.val())
   .sort()
   .reverse();

let results = arrayOfKeys
   .map((key) => snapshot.val()[key]);

Note that we’re sorting the keys before reversing their order — this is done to ensure the right order, since JavaScript does not guarantee object key order.

Next, we need to initialise our reference with the oldest out of the 5 keys so that when the user scrolls to the bottom of the page our next fetch function knows where to carry on from:

referenceToOldestKey = arrayOfKeys[arrayOfKeys.length-1];

(The oldest key is in last position because remember that limitToLast returns items in chronological order and we reversed it.)

And, now that we’re finished with the first fetch:

// You can do what you want to do with the data, i.e.
// append to page or dispatch({ … }) if using redux

Next fetch

Ok, our user has just hit the bottom of the page let’s fetch the next 5 newest items for them by creating the following query:

firebase.database().ref(‘items’)
 .orderByKey()
 .endAt(referenceToOldestKey)
 .limitToLast(6)
 .once(‘value’)
 .then((snapshot) => { … } )
 .catch((error) => { … } );

This query does the following:

• orderByKey sorts the items by their keys in chronological order (oldest to newest)
• endAt selects all items from the 1st one ever added up to our reference variable (inclusive)
• limitToLast selects 6 items from the end (starting with the 6th)

The returned object will look like this:

{ 
   firstInsertedItem: { … },
   SecondInsertedItem: { … },
   ThirdInsertedItem: { … },
   FourthInsertedItem: { … },
   FifthInsertedItem: { … },
   SixthInsertedItem: { … },  // our reference is included!
 }

• But why are we limiting to the 6 latest items rather than 5, like we did in the first fetch?

Because endAt is inclusive which means that our reference key gets included in the returned object. And so if we limit to 5 we would end up with only 4 new items as 1 would be a duplicate, therefore we need to request for 6 and then handle the removal of the 6th one on the client side.

Ok, now that we see how the query works let’s reverse the returned object and then remove the duplicate.

let arrayOfKeys = Object.keys(snapshot.val())
   .sort()
   .reverse()
   .slice(1);

let results = arrayOfKeys
   .map((key) => snapshot.val()[key]);

Why slice(1)? Because after reverse() our duplicate moved from last position into the first one. How do we know it was in last position to begin with? Because remember that the keys were returned in chronological order.

Lastly, we need to update our reference with the oldest key from the current fetch:

referenceToOldestKey = arrayOfKeys[arrayOfKeys.length-1];

And, now that we’re finished with the second fetch:

// You can do what you want to do with the data, i.e.
// append to page or dispatch({ … }) if using redux

And this concludes the tutorial, thank you for reading and hopefully you learned something new. Look below to see the full code sample.

The complete code sample

Note: code duplication inside .then of both queries is intentional to make it easier to read, no need to look all over the place to find the relevant code, as would be required if the code was moved out into a separate function.

let referenceToOldestKey = ‘’;

if (!referenceToOldestKey) { // if initial fetch
 
  firebase.database().ref(‘items’)
   .orderByKey()
   .limitToLast(5)
   .once(‘value’)
   .then((snapshot) => { 

      // changing to reverse chronological order (latest first)
      let arrayOfKeys = Object.keys(snapshot.val())
         .sort()
         .reverse();

      // transforming to array
      let results = arrayOfKeys
         .map((key) => snapshot.val()[key]);

      // storing reference
      referenceToOldestKey = arrayOfKeys[arrayOfKeys.length-1];
 
      // Do what you want to do with the data, i.e.
      // append to page or dispatch({ … }) if using redux

   })
   .catch((error) => { … } );
 
 } else {
 
  firebase.database().ref(‘items’)
   .orderByKey()
   .endAt(oldestKeyReference)
   .limitToLast(6)
   .once(‘value’)
   .then((snapshot) => {

     // changing to reverse chronological order (latest first)
     // & removing duplicate
     let arrayOfKeys = Object.keys(snapshot.val())
         .sort()
         .reverse()
         .slice(1);

      // transforming to array
      let results = arrayOfKeys
         .map((key) => snapshot.val()[key]);

      // updating reference
      referenceToOldestKey = arrayOfKeys[arrayOfKeys.length-1];

      // Do what you want to do with the data, i.e.
      // append to page or dispatch({ … }) if using redux

   })
   .catch((error) => { … } );
 
 }

Hopefully the article wasn’t complete waste of your time and you actually picked something up from it :).

By the way, if you’re a Twitter person you can reach me there at linasmnew, (I’m new there 😅 😄)

Infinite Scrolling In Firebase was originally published in HackerNoon.com on Medium, where people are continuing the conversation by highlighting and responding to this story.