Forem: Sorin Chis

Light/Dark mode toggle with React using Context API and styled components

Sorin Chis — Mon, 11 May 2020 15:15:14 +0000

Have you ever wonder how to build a dark/light theme with React? after checking a couple of solution I've decided to build a basic and simple theme switcher from scratch using Context API and styled-components.

This is just one way of doing it from many ..many more 🤘💥. If you are curious about what we are gonna build here you can see the live demo of the final version and full code from github here.

If you don't already have an ReactJS application you can easily create one with create-react-app.

Once you have your react app running you will have to install 3 packages:

styled-components are one of the new ways to use CSS in modern JavaScript. It is the meant to be a successor of CSS Modules, a way to write CSS that's scoped to a single component, and not leak to any other element in the page.
react-switch we will use this library for switch button
react-icons popular icons in your React projects easily, we will use it for bringing light and dark icons.

First we will create a component AppProvider.js in which we will define the initial state of our theme mode using useState and then create an application context with createContext function.

Context provides a way to pass data through the component tree without having to pass props down manually at every level. The theme mode will be available through useContext hook.

Every Context object comes with a Provider React component that accepts a value prop. This value will be passed to down to all Provider descendants.

import React, { createContext, useState } from "react";

export const AppContext = createContext();

const AppProvider = ({ children }) => {
  const [themeMode, setThemeMode] = useState("lightTheme");

  const value = { themeMode };

  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
};

export default AppProvider;

Once we have the AppProvider we can simply import it in index.js file and wrap all our application with it

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import AppProvider from "./AppProvider";

ReactDOM.render(
  <AppProvider>
    <App />
  </AppProvider>,
  document.getElementById("root")

Now it will be a perfect time to check if our Provider it's doing its job by bringing the initial theme mode in one of the Provider descendants. Let's create a new component ThemeSwitcher.js and import it in App.js

import React from "react";
import ThemeSwitcher from "./ThemeSwitcher";
function App() {
  return (
    <>
      <ThemeSwitcher />
    </>
  );
}

export default App;

Using useContext hook we we will gain access to our initial theme mode lightTheme. Now you can really see the power of context API - we can pass the state and manage it without importing any library 👏💪

import React, { useContext } from "react";
import { AppContext } from "./AppProvider";

const ThemeSwitcher = () => {
  const { themeMode } = useContext(AppContext);
  console.log("THEME MODE: ", themeMode);
  return <div></div>;
};

export default ThemeSwitcher;

Once we check that everything it's working we will start creating the theme colors and global styles for our beautiful application. Let's add a folder called styles in our src folder and create a theme.js file.

theme.js - in which will keep our theme colors

export default {
  lightTheme: {
    colors: {
      background: 'radial-gradient(lightGrey, black)',
      black: 'black',
      white: 'white',
      blue: '#a0e9fd',
      lightBlue: '#caf3fe',
      secondary: 'radial-gradient(green, yellow)',
    },
    transition: '0.3s',
  },
  darkTheme: {
    colors: {
      background: 'radial-gradient(black, lightGrey)',
      black: 'white',
      white: 'black',
      blue: '#a0e9fd',
      lightBlue: '#caf3fe',
      secondary: 'radial-gradient(yellow, green)',
    },
    transition: '0.3s',
  },
}

After creating the theme we will need to import this file in our provider and bring the ThemeProvider from styled-components

import { ThemeProvider } from 'styled-components'
import { theme } from './styles'

Now we are ready to wrap our application with the ThemeProvider. Create a costumTheme constant and with the help of our useState hook (which its keeping our theme mode - lightTheme that is hardcoded for now) we can get the specific colors from theme object

const AppProvider = ({ children }) => {
  const [themeMode, setThemeMode] = useState("lightTheme");

  const value = { themeMode };
  const costumTheme = theme[themeMode];

  return (
    <AppContext.Provider value={value}>
      <ThemeProvider theme={costumTheme}>
        {children}
      </ThemeProvider>
    </AppContext.Provider>
  );
};

Perfect time to check if out theme provider it's working. For verify this really simply we can create a global file in styles folder and bring some of the theme colors here.

import { createGlobalStyle, css } from 'styled-components'

export default createGlobalStyle`
${({ theme }) => css`
  html {
    height: 100%;

    body {
      display: flex;
      flex-direction: column;
      height: 100%;
      margin: 0;

      #root {
        background: ${theme.colors.background};
        color: ${theme.colors.black};
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: sans-serif;
        height: 100%;
        padding: 15px;
      }
    }
  }
`}
`

Notice now that our theme colors are available in the entire application.
We can create an index.js file in the styles folder and export both global and theme files.

export { default as GlobalStyles } from "./global";
export { default as theme } from "./theme";

Once we bring GlobalStyles in AppProvider component and add it bellow the ThemeSwitcher our application background will take the styles corresponding to lightTheme

import Global styles in AppProvider

import { GlobalStyles, theme } from "./styles";

add global styles

 <ThemeProvider theme={costumTheme}>
      <GlobalStyles />
      {children}
 </ThemeProvider>

Now let's create a function for toggle the theme mode. We will check the previous state and change it base on the current mode

const toggleTheme = () => {
    setThemeMode(prevState => {
      if (prevState === 'lightTheme') {
        return 'darkTheme'
      } else {
        return 'lightTheme'
      }
    })
  }

Add this function in value object. After this the toggleTheme function will be available in the entire application

  const value = { toggleTheme, themeMode }

Final step is to bring this function in ThemeSwitcher component and execute it. Using Context API bring toggleTheme from the context and Switch component from react-switch.
Now all the magic its handle by Switch components. After reading the documentation we will know that it can receive props like as:

checked - receive true or false, we will check if the theme its light or dark;
height;
width;
checkedIcon - it can receive an icon, so we will import IoMdSunny for light icon from 'react-icons';
uncheckedIcon - it can receive an icon, so we will import IoMdMoon for light icon from 'react-icons';
onChange - invoked when the user clicks or drags the switch;

import React, { useContext } from "react";
import styled from "styled-components";
import { AppContext } from "./AppProvider";
import Switch from "react-switch";

const ThemeSwitcher = () => {
  const { toggleTheme, themeMode } = useContext(AppContext);
  const handleThemeChange = (e) => {
    toggleTheme();
  };
  return (
    <Root>
      <h1>Toggle Theme</h1>
      <Switch
        checked={themeMode === "lightTheme" ? true : false}
        className="test"
        height={50}
        width={120}
        checkedIcon={
          <Sun
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              height: "100%",
              fontSize: 35,
              paddingLeft: 10,
            }}
            color={themeMode === "lightTheme" ? "white" : "grey"}
            className="light"
          />
        }
        uncheckedIcon={
          <Moon
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              height: "100%",
              fontSize: 35,
              paddingLeft: 24,
            }}
            color={themeMode === "darkTheme" ? "blue" : "blue"}
            className="dark"
          />
        }
        onChange={handleThemeChange}
      />
    </Root>
  );
};

export default ThemeSwitcher;

const Root = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  .custom-classname .react-toggle--checked .react-toggle-track {
    background-color: red;
    height: 200px;
    width: 200px;
    padding: 30px;
  }
`;

For future improvements we can take advantage of the local storage and persist light/dark mode. We will make small changes in AppProvider component.

First we will need to check if there is a theme in localStorage or not, then set the initial themeMode with it, if not we will set it by default with lightTheme

const [themeMode, setThemeMode] = useState(
    localStorage.getItem("theme") || "lightTheme"
  );

Next we will bring useEffect and save the themeMode in localStore every time we change it

  useEffect(() => {
    localStorage.setItem("theme", themeMode);
  }, [themeMode]);

Add themeMode in the dependency array. The array is the second optional argument in the useEffect hook. As the name implies, it is an array of dependencies that, when changed from the previous render, will recall the effect function defined in the first argument

Conclusion

As this it's just a basic example how you can achieve this functionality, on a bigger application the complexity will increase and probably needs more work into it.

I would appreciate any feedback, good or bad, in order to improve the next articles.
Thanks for reading and happy coding! :)

Tweet html-node as an image using ReactJS and NodeJS

Sorin Chis — Tue, 14 Apr 2020 15:41:30 +0000

This article was born while building Codelify. Giving users the opportunity to share a code snippet is a great way to show your ideas to other people in your network.

In this article we will learn how to create an image from any html-node of your site. Once we have the image we will post it in a tweet along with the text and links that we want.

This article will be divided in two parts:

NodeJs server with express (backend)
ReactJs part (frontend)

Part one

Before we can start coding, we need to create an account on Twitter and get a developer account approved by the Twitter team.

For this you will need to create a twitter account and then login into
twitter developer website

a good example about how to create an account can be found here

Once your developer account application has been approved, we can move on with creating a Twitter developer application and get access to the tokens we can use in our code.

Create a Twitter Developer Application

To create an application, go to the apps section of your developer account and click on the Create an app button.

After filling out the form with all information required, hit create button to create your application.

Get Your Access Tokens

Go to the page for your newly created application and open the Keys and tokens tab.This page lists the keys and tokens for your application. In our code, these will be used for authentication when we make requests to the Twitter API.

Configure Node.js Server

Let's create a directory for our code:

$ mkdir server-tweet

And then cd into your directory:

$ cd server-tweet

We will have to run npm init for creating package.json file that will hold the configuration for our code.

Next we will create two files. The first one is for starting the server, named index.js and the other one will be used for tweeter endpoints.

$ touch index.js 
$ touch server.js

Install Dependencies

Next, we need to add the NPM package dependencies that will be used in our project. To make things easier we'll just add everything we need right now.

npm install express
- is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based Web applications.
npm install cors
- the easiest way to get CORS working in Express is by using the cors npm module
npm install dotenv
- helps with storing configuration in the environment separate from code
npm install ba64
- a tiny npm module for saving Base64 encoded images that are part of data URLs to your file system
npm install twitter
- an asynchronous client library for the Twitter REST and Streaming API's.

The twitter npm package will do a lot of the grunt work in making requests and interacting with the Twitter API.

Configure Environment Variables

Create an .env file in your project root, add the code below. Make sure you add your access keys found in your Twitter Developer Dashboard.

CONSUMER_KEY="YOUR_CONSUMER_KEY"
CONSUMER_SECRET="YOUR_CONSUMER_SECRET"
ACCESS_TOKEN_KEY="YOUR_ACCESS_TOKEN_KEY"
ACCESS_TOKEN_SECRET="YOUR_ACCESS_TOKEN_SECRET"

Open index.js and add these code:

require("dotenv").config();

const dotenv = require("dotenv");
const server = require("./server.js");

const PORT = 9000;

server.get("/", (req, res) => {
  res.send("<h1>Yeee! Server working</h1>");
});

server.listen(PORT, () => {
  console.log(`\n*** Server Running on http://localhost:${PORT} ***\n`);
});

We use the dotenv.config() function, which reads our .env file, parses its contents and assigns the value to the global process.env object.

As you can notice we still need to create our server.js file.

Add the following code in server.js file:

const express = require("express");
const Twitter = require("twitter");
const ba64 = require("ba64");
const fs = require("fs");

const server = express();
const cors = require("cors");

const client = new Twitter({
  consumer_key: process.env.CONSUMER_KEY,
  consumer_secret: process.env.CONSUMER_SECRET,
  access_token_key: process.env.ACCESS_TOKEN_KEY,
  access_token_secret: process.env.ACCESS_TOKEN_SECRET
});

server.use(cors());
server.use(express.json());


module.exports = server;

We create a new Twitter client object with all the access keys from our .env file. We'll use that client object to make requests to the Twitter API throughout the rest of this article.

Now it will be a good time to check your server functionality so far. You can start your server by running npm run start, and go to localhost:9000. If everything its working normally you should see the message: Yeee! Server working.

After you check that everything it's working so far we can implement our server.post() request to get dataURL from the client(react part).

// POST method route
server.post('/imagetotweet', (req, res)=> {
  //our dataURL will be in req
  const { dataURL } = req.body;
  console.log(dataURL)
})

Once we will have the dataURL we will need to save the image to file with the help of ba64 package.

server.post("/imagetotweet", async (req, res) => {
  const { dataUrl, shareId } = req.body;
  // console.log(dataUrl);
  ba64.writeImage("myimage", dataUrl, (err) => {
    if (err) {
      console.log("Write image error", err);
    }
    console.log("Image saved successfully");
  });
});

Now the image will be saved in the root file of our application.

Then, we read the image using the fs module. This result will represent the data that we will attach to media/upload twitter endpoint

server.post("/imagetotweet", async (req, res) => {
  const { dataUrl } = req.body;
  ba64.writeImage("myimage", dataUrl, (err) => {
    if (err) {
      console.log("Write image error", err);
    }
    console.log("Image saved successfully");

    fs.readFile("myimage.png", (err, data) => {
      if (err) {
        console.log("Read file err", err);
      }
      try {
        //twitter api endpoints call : media/upload
      } catch (error) {
        res.status(500).json({ error: error.message });
      }
    });
  });
});

After that, we requested the Twitter API to upload the image with the client.post method. The request goes to the "media/upload" endpoint and the only data we add to the request is the image.

Once the image is successfully uploaded, Twitter will return a media_id_string value. Then we create a variable called status that holds both the text and media_id for the new twitter post.

server.post("/imagetotweet", async (req, res) => {
  const { dataUrl } = req.body;
  // console.log(dataUrl);
  deleteImage();
  ba64.writeImage("myimage", dataUrl, (err) => {
    if (err) {
      console.log("Write image error", err);
    }
    console.log("Image saved successfully");

    fs.readFile("myimage.png", (err, data) => {
      if (err) {
        console.log("Read file err", err);
      }
      try {
        client.post(
          "media/upload",
          {
            media: data,
          },
          function (error, media, response) {
            if (error) {
              console.log("MEDIA UPLOAD", error);
            } else {
              const status = {
                status: "Just made a tweet",
                media_ids: media.media_id_string,
              };
              // twiter endpint call : statuses/update
            }
          }
        );
      } catch (error) {
        res.status(500).json({ error: error.message });
      }
    });
  });
});

The last thing we have to do is to use the client.post to make a statuses/update request to the twitter API. The only data we need to include in the request is the status that we've created previously.In case of success we will send the response (image id) with a 200 status code to the client. Then we handle the error and log the tweet object response.

This is how the final version of our request will look like:

server.post("/imagetotweet", async (req, res) => {
  const { dataUrl } = req.body;
  // console.log(dataUrl);
  deleteImage();
  ba64.writeImage("myimage", dataUrl, (err) => {
    if (err) {
      console.log("Write image error", err);
    }
    console.log("Image saved successfully");

    fs.readFile("myimage.png", (err, data) => {
      if (err) {
        console.log("Read file err", err);
      }
      try {
        client.post(
          "media/upload",
          {
            media: data,
          },
          function (error, media, response) {
            if (error) {
              console.log("MEDIA UPLOAD", error);
            } else {
              const status = {
                status: "Just made a tweet",
                media_ids: media.media_id_string,
              };
              client.post("statuses/update", status, function (
                error,
                response
              ) {
                if (error) {
                  console.log(error);
                } else {
                  res.status(200).json({
                    message: response.entities.media[0].display_url,
                  });
                  // console.log("Display URL: ", response.entities.media[0].display_url);
                }
              });
            }
          }
        );
      } catch (error) {
        res.status(500).json({ error: error.message });
      }
      deleteImage();
    });
  });
});

statuses/update endpoint will return a displayURL string that will actually be our image id. Once we put this id in the tweet content, twitter will recognize the id and it will show the specific image (displayURL will look something like this: pic.twitter.com/AxDW8sCzdZ)

Notice that I've added an extra function at the end deleteImage in which after all of the request are done we will delete the image from the root.

const deleteImage = () => {
  const path = "myimage.png";
  if (fs.existsSync(path)) {
    //file exists
    fs.unlink(path, (err) => {
      if (err) {
        console.error(err);
        return;
      }
      //file removed
    });
  }
};

Now your endpoint it's ready to be used on the client side. Next we will implement the ReactJs part in which we will make a post request with dataURL and the server will return us the displayURL :)

Part two

If you don't already have an ReactJS application you can easily create one with create-react-app.

Once you have your react app running you will have to install 2 packages:

dom-to-image package which will turn arbitrary DOM node into (PNG or JPEG) image, optionally you can create SVG too.
axios package for making HTTP requests from the browser to the server.

First step you have to import these two packages into your component:

import domtoimage from "dom-to-image";
import axios from "axios";

and then add the content that you will want to copy and publish it on twitter. After this you will need to assign an id or if you are comfortable you can use refs in react and attach it to a DOM node

<div id="content-to-be-copied">
 <h1>My fancy section</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua 
 </p>
</div>

Next step it's to create a button and add a click listener to it for handling share functionality.

<button onClick={handleShare}>
   Publish on Twitter
</button>

In handleShare function we will take the node that we will want to copy.

let node = document.getElementById("content-to-be-copied");

From dom-to-image package we will use .toPng option to turn the DOM node into an PNG image - this will return a promise, which are fulfilled with corresponding data URLs (get a PNG image base64-encoded data URL).

domtoimage
      .toPng(node)
      .then(dataUrl => {
        console.log("Data URL: ",dataUrl)
      })
      .catch(err => console.log(err));

Once we will have dataUrl for the image we are half way done with the frontend part. Next we will have to send the data to the server with a HTTP request using axios.

Axios is a promise based HTTP client for the browser and Node.js. Axios makes it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations.For sending data to the server we will use axios.post() method and attach the dataURL to the body.

axios.post('http://localhost:9000/imagetotweet', { dataUrl });

Once an HTTP request is made, axios returns a promise that is either fulfilled or rejected, depending on the response from the backend service. To handle the result, you can use the .then() and .catch() methods.

In case of the request is successfully we will receive the displayURL id from the server (this will be our image).

axios.post("http://localhost:9000/imagetotweet",{dataUrl: dataUrl})
     .then(res => {
        // console.log(res.data.message);
     })
     .catch(err => console.log(err, "Error trying to tweet"))

Handling the request

We are almost over with the react part - after we get a successfully message we will need to prepare the tweet content.
Twitter url will receive 4 variables

url (optional) your website address
via(optional) your tweeter handler
title: the response from the server res.data.message (image id)
hashtags (optional) add any hashtags you want to appear in your tweet

const url = "www.codelify.dev";
const via = "codelify_dev"; //your twitter handler
const title = res.data.message;
const hashtags = "reactJS,tweet,codelify";
const twitterURL =`https://twitter.com/shareurl=${url}&text=${title}
                   &via=${via}&hashtags=${hashtags}`;
window.open(twitterUrl,"twitter");
//openTwitterUrl(twitterURL); //optional for creating a custom window

Optionally you can create a custom function to send the twitter url. In this function we can set the size of tweeter window

 function openTwitterUrl(twitterUrl) {
    const width = 575;
    const height = 400;
    const left = (window.outerWidth - width) / 2;
    const top = (window.outerHeight - height) / 2;
    const opts = 
       `status=1,width=${width},height=${height},top=${top},left=${left}`;
        window.open(twitterUrl, "twitter", opts);
  }

After we do all of this steps our handleShare function will look something like this:

const handleShare = () => {
    let node = document.getElementById(`content-to-be-copied`);
    domtoimage
      .toPng(node)
      .then(dataUrl => {
        axios
          .post(
            "https://backend-url.com",
            {
              dataUrl: dataUrl,
            }
          )
          .then(res => {
            const url = "www.codelify.dev";
            const via = "codelify_dev";
            const title = res.data.message;
            const hashtags = "reactJS,tweet";
            const twitterURL = 
            `https://twitter.com/shareurl=${url}&text=${title}&via=${via}
             &hashtags=${hashtags}`;
            window.open(twitterUrl,"twitter");
           //openTwitterUrl(twitterURL); //optional 
          })
          .catch(err => console.log(err, "Error trying to tweet"))
      })
      .catch(err => console.log(err));
  };

After hitting the endpoint from the react app a twitter window will pop up with the image id and the message

After tweet the post should look something like this

This is basically how we implement the sharing functionality in Codelify

Codelify give developers a central place to easily Store, Manage, Retrieve and Share code snippets.

The code for the backend can be found in this Github repository for this article.

Conclusion

As this is my first article the code and content could be improve in many ways, I would appreciate any feedback, good or bad, in order to improve the next articles.
Thanks for reading and happy coding! :)