Alfie Mellor

Alfie Mellor


How to use Chart.js in React

#reactjs #javascript #web-development

What is GEEK

Buddha Community

Dylan Iqbal


ChartJS should be a top contender for any data visualization endeavor in React (and in other frameworks). While D3 is a power house of possibilities, and other worthwhile options exist — ChartJS solves most data visualization needs.

What about using the React-ChartJS-2 Wrapper?

If you are a React developer exploring ChartJS — chances are you’ve found the really friendly and easy to use wrapper. If you have a simple dataset with few customization tweaks, it’s a great solution. However, as your data visualization and customization needs grow — the more you’ll benefit from getting under the hood of ChartJS. We can refer directly to the ChartJS documentation and customize as much as we need.

Using ChartJS in React

I’ll be walking you through my implementation and customization of ChartJS in React: addressing the initial set up, common customizations, and working with custom tooltips. By the end of this article, you should feel comfortable working with ChartJS and implementing a custom design in a React project.

🚀 Initial Setup

You can set up your own boilerplate for the project however you’d like. The main focus here is the component where we are creating and customizing a chart.

Following Along

You can clone down my repo if you’d like to skip the tedious boilerplate work and get to the good stuff. There are two main folders: views and components. Each folder has my code (./Dashboard) and a folder for your own work (./MyDashboard).

Incorporating into Your Own Project

I provide extensive gists that make it easier to incorporate into your own project. The only additional step you’d need to take is to install ChartJS:

npm install chart.js --save

Line charts are, in my opinion, the most popular way of displaying data. So I’ll focus on working with line charts. However, once you’re familiar with this process, it isn’t that challenging to walk through the docs and figure out further customizations in a different chart type. You’ll want to create a new class component named myLineGraph.js (change your component name to myLineGraph instead of LineGraph) with the following snippet:

import React, { Component } from 'react'
import Chart from "chart.js";
import classes from "./LineGraph.module.css";

export default class LineGraph extends Component {
    chartRef = React.createRef();
    componentDidMount() {
        const myChartRef = this.chartRef.current.getContext("2d");
        new Chart(myChartRef, {
            type: "line",
            data: {
                //Bring in data
                labels: ["Jan", "Feb", "March"],
                datasets: [
                        label: "Sales",
                        data: [86, 67, 91],
            options: {
                //Customize chart options
    render() {
        return (
            <div className={classes.graphContainer}>

myLineChart.js hosted with ❤ by GitHub

You’ll frequently see ctx as the variable assignment in other tutorials and the documentation. For instance:

var ctx = document.getElementById('myChart').getContext('2d');

Here, I am taking advantage of refs in React and passing in our

If we place the new Chart() outside of a lifecycle method, our component won’t be able to find the

Styling the Canvas Element: You’ll notice that I don’t pass styling to the canvas element. Instead I apply styles to an outer div container. I have found through trial and error it is much easier to style a container div than the canvas itself. You’ll save yourself a lot of headache if you can manage styles from an outer container.

Side Note about CSS Modules

This line of code might look unfamiliar to you:

import classes from "./LineGraph.module.css";

If you’re not familiar with CSS Modules, they now come out of the box in CRA. Previously you had to eject your React App and edit the webpack config. Now it’s easier than ever to scope your CSS. Simply renaming your CSS files with the .module.css will allow you to start using CSS modules. The imported classes will be an object which you can use to assign styles. No more collision with styling from other stylesheets. If you inspect the className on the div holding the canvas you should see a unique name like this:

<div class="LineGraph_graphContainer__2g04_">

Here’s what we’re starting out with:

Initial Chart

Without any fancy work on our part, we have a load animation, a tooltip, a legend, and axes labels. We’ve already accomplished quite a bit without much effort. But now we need to populate and pass down relevant data. For the sake of practicality, we’ll be using mock sales data from the mockData.js file.

Passing Data

Now let’s pass in the provided mock data in the Dashboard component:

import React, { Component } from 'react';
import classes from "./Dashboard.module.css";
import LineGraph from "../../components/Dashboard/LineGraph";
import chartIcon from "../../assets/chart-icon.svg";
import { managerData, yearLabels } from "./mockData";

export default class Dashboard extends Component {
    state = {
        data: managerData,
        labels: yearLabels

    render() {
        const { data, labels } = this.state;
        return (
            <div className={classes.container}>
                <img src={chartIcon} alt="bar chart icon" />
                <h1>Sales Dashboard</h1>
                    labels={labels} />

Dashboard.js hosted with ❤ by GitHub

This is starting to look a lot more useful than before.

With Annual Data

Working with Multiple Datasets

The datasets key is an array. So we can easily add another object to the array with a national average or any other data. We have an exported nationalAverageData array that you can pull in from the mockData.js file to add another dataset.

datasets: [
  {label: "Sales", data: data},
  {label: "National Average", data: nationalAverageData}

MultipleDatasets.js hosted with ❤ by GitHub

Team Sales vs National Average | You can toggle the datasets by clicking on the key in the legend

Protecting Yourself from Label Errors

We have to pass the same amount of labels as we do data points for our graph. Otherwise our graph will be in bad shape. It’s a rare scenario that this would occur, but I prefer to add a layer of protection. Optionally, you could do the same for the data points being passed down. But that can be tricky to do without manipulating the data we want to represent.

data: {
    //Bring in data
    labels: labels.length === data.length ? labels : new Array(data.length).fill("Data"),
    datasets: [
        {label: "Sales", data: data},
        {label: "National Average", data: nationalAverageData}

LabelErrorProtection.js hosted with ❤ by GitHub

Displays graph data without issue despite not having labels

Chart Customization

Now, we’ll customize our chart with some of the more popular customization options.

Above our exported myLineChart.js we can add some global default customizations:

//--Chart Style Options--// = "'PT Sans', sans-serif" = false; = 0;
//--Chart Style Options--//

// ^ Place Chart Style Options above our class ^
export default class myLineGraph extends Component {
    chartRef = React.createRef();
//Rest of our code....

GlobalChartOptions.js hosted with ❤ by GitHub

Adding A Custom Font: = "'PT Sans', sans-serif"

Hiding Chart Legend: = false;

The legend allows us to toggle visibility of multiple datasets without having to manage state or write a single line of code. However, it can sometimes be helpful to remove for single datasets where the legend isn’t as necessary.

Removing the Line Graph Tension = 0;

Setting the tension to 0 removes the smooth curves in our graph. Optionally, you can set the value to 0.1 or 0.2 to get a slight tension curve.

Example of 0 tension:

No Legend, Custom Font, and 0 Line Tension

Responsive Design

options: {
  //Customize chart options
  responsive: true,
  maintainAspectRatio: false,

InitialOptions.js hosted with ❤ by GitHub

We can alter our chart to be responsive, and decide whether or not to maintain aspect ratio. Setting maintainAspectRatio to false can be helpful for visually adapting your chart for mobile design. I find in most cases, the above options fit my styling needs. The chart can get “squished” by not maintaining the aspect ratio. So keep that in mind.

Customize the Layout

options: {
  responsive: true,
  maintainAspectRatio: false,
  layout: {
      padding: {
          top: 5,
          left: 15,
          right: 15,
          bottom: 15

OptionsWithLayout.js hosted with ❤ by GitHub

Adjust Padding for a Given Chart

As far as the docs show, padding is the only option here we can pass into the layout object.

Removing Data Ticks, Graph Lines, and Borders

options: {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
      xAxes: [{
          ticks: { display: false },
          gridLines: {
              display: false,
              drawBorder: false
      yAxes: [{
          ticks: { display: false },
          gridLines: {
              display: false,
              drawBorder: false

CustomizingXandYAxes.js hosted with ❤ by GitHub

All labels, grid lines, and borders removed with tension set to 0

It might be helpful to maintain grid lines or axes labels — but there are instances where the graph representation needs to be simplified. In our case where we’re comparing team sales across a given year, the labels are quite helpful.

Removing Fills

We can alter the line color, and the fill underneath the line. We’ll apply a gradient to the line and the fill of our dataset. For now, let’s see how we can customize the fill.

That already looks cleaner! Let’s see how we got here:

datasets: [
        label: "Sales",
        data: data,
        fill: false,
        borderColor: "#98B9AB"

        label: "National Average",
        data: average,
        fill: false,
        borderColor: "#98B9AB"

NoFill.js hosted with ❤ by GitHub

We can choose whether or not to fill a background color underneath our graph line, as well as pass a color for each dataset line.


To create a linear gradient, we do the following:

let gradientLine = canvas.createLinearGradient(x0, y0, x1, y1);

*The createLinearGradient() is a method on the canvas. It has nothing to do with ChartJS and is applicable to any *

const {width: graphWidth} = myChartRef.canvas;

let gradientLine = myChartRef
    .createLinearGradient(0, 0, graphWidth * 2, 0);
gradientLine.addColorStop(0, "#FF006E");
gradientLine.addColorStop(1, "#F46036");

AddingALinearGradient.js hosted with ❤ by GitHub

The createLinearGradient() method requires 4 arguments: x0, y0, x1, and y1. These values have to be finite. Which means we don’t have a way of setting a gradient from 0% to 100%. Instead, we have to dynamically find the width of our graph. The first line in the above gist grabs the width from the canvas element and assigns it to chartWidth. We pass the chartWidth in as our x1 value. The same is possible for height if you wish to alter your gradient vertically.

Horizontal Gradient

We can apply vertical gradients, add multiple color stops, and use rgb to adjust opacity:

const {height: graphHeight} = myChartRef.canvas;

let gradientLine = myChartRef
    .createLinearGradient(0, 0, 0, graphHeight);
gradientLine.addColorStop(0, "rgb(255, 0, 110, 0.2)");
gradientLine.addColorStop(0.5, "rgb(255, 0, 110, 0.35)");
gradientLine.addColorStop(1, "rgb(255, 0, 110, 0.7)");

VerticalGradientWithOpacity.js hosted with ❤ by GitHub

Vertical gradients are more challenging because our datasets can vary. Which means that we have to adjust our y0 and y1 to be a visible part of the fill or border color. As you can see, I’m having a lot of fun with bold colors. But it’s easy to play with gradients/opacity within a more neutral color scheme to achieve the same thing.

Dynamic Data

We’ve passed data to our component, but what if our clients want to see quarterly sales? Monthly? Making our charts dynamic is more challenging than passing down new data. In fact, the chart will glitch and for half a second show the previous dataset — the dataset that isn’t even available in the current component. Which isn’t good.

You can look at my component in the repo if you want to add in the buttons and method I have for toggling between datasets. Otherwise you can write your own. There isn’t anything special or perfect about my buttons or methods. I’ll focus instead on the changes within myLineChart.js file.

Dynamic Chart with Button Toggle

Our chart is currently set up in ComponentDidMount(). We did this so that we could be sure render() had occurred before searching for our chart ref. But now, even after a state change, our Chart won’t dynamically update. So let’s reconfigure:

import React, { Component } from 'react'
import Chart from "chart.js";
import classes from "./LineGraph.module.css";
let myLineChart;

//--Chart Style Options--// = "'PT Sans', sans-serif" = false;
//--Chart Style Options--//

export default class LineGraph extends Component {
    chartRef = React.createRef();

    componentDidMount() {

    componentDidUpdate() {

    buildChart = () => {
        const myChartRef = this.chartRef.current.getContext("2d");
        const { data, average, labels } = this.props;

        if (typeof myLineChart !== "undefined") myLineChart.destroy();

        myLineChart = new Chart(myChartRef, {
            type: "line",
            data: {
                //Bring in data
                labels: labels,
                datasets: [
                        label: "Sales",
                        data: data,
                        fill: false,
                        borderColor: "#6610f2"
                        label: "National Average",
                        data: average,
                        fill: false,
                        borderColor: "#E0E0E0"
            options: {
                //Customize chart options


DynamicData.js hosted with ❤ by GitHub

What did we change?

  1. We separated our chart “building” functionality into its own function.
  2. We build the chart in ComponentDidMount() and componentDidUpdate().
  3. We assign our chart instantiation to a variable that we declare at the top of our file.
  4. We check if the chart was built previously. If so, we use the destroy() method before we create our chart.

You can use an alternative method that is listed in the docs for updating chart data if you wish to use update() instead.

Component vs Pure Component

Toggling irrelevant state forces the Chart to re-render

However, our component now re-renders even when irrelevant state changes in the parent component . In addition, the chart’s load animation will fire when no change to the chart has occurred. To fix this, we can change the myLineGraph.js to a PureComponent.

import React, { PureComponent } from 'react'

export default class LineGraph extends PureComponent {
  /// of our code...///

PureComponent.js hosted with ❤ by GitHub

According to the React docs:

If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.
However, they note that this is a shallow comparison. Meaning that for nested data structures, this might not perform the way we expect. If we were to have children within myLineGraph.js we would also want to make sure they were PureComponents. For our case, where the labels and datasets (reference values) change via setState(), we expect the same result given the same prop values, and we don’t have any children components — PureComponent is a good solution to prevent the re-render shown above.

Customizing Tooltips

Out of the box, the ChartJS tooltip is responsive and well-designed. For most use cases, the tooltip should be sufficient. However, a few lines of code can really help improve the styling or better match our branding.

Simple Customizations:

options : { 
  ///Other configurable options
  tooltips: {
    backgroundColor: "rgba(0,0,0,0.8)"
    bodyAlign: "left"
    bodyFontColor: "#fff"
    bodySpacing: 2
    borderColor: "rgba(0,0,0,0)"
    borderWidth: 0
    callbacks: {beforeTitle: ƒ, title: ƒ, afterTitle: ƒ, beforeBody: ƒ, beforeLabel: ƒ, …}
    caretPadding: 2
    caretSize: 5
    cornerRadius: 6
    custom: null
    displayColors: true
    enabled: true
    footerAlign: "left"
    footerFontColor: "#fff"
    footerFontStyle: "bold"
    footerMarginTop: 6
    footerSpacing: 2
    intersect: true
    mode: "nearest"
    multiKeyBackground: "#fff"
    position: "average"
    titleAlign: "left"
    titleFontColor: "#fff"
    titleFontStyle: "bold"
    titleMarginBottom: 6
    titleSpacing: 2
    xPadding: 6
    yPadding: 6

TooltipOptions.js hosted with ❤ by GitHub

The tooltips object above represents the options that we can change. The properties are fairly straightforward, but you can read more in their official documentation. One property worth pointing: displayColors can be set to false if you want to remove the square color from the tooltip.

Changing the tooltip configuration should resolve the majority of your customization needs. In the case that you need a custom HTML tooltip, ChartJS provides us the code to get started:

tooltips: {
    // Disable the on-canvas tooltip
    enabled: false,

    custom: function(tooltipModel) {
        // Tooltip Element
        var tooltipEl = document.getElementById('chartjs-tooltip');

        // Create element on first render
        if (!tooltipEl) {
            tooltipEl = document.createElement('div');
   = 'chartjs-tooltip';
            tooltipEl.innerHTML = '<table></table>';

        // Hide if no tooltip
        if (tooltipModel.opacity === 0) {
   = 0;

        // Set caret Position
        tooltipEl.classList.remove('above', 'below', 'no-transform');
        if (tooltipModel.yAlign) {
        } else {

        function getBody(bodyItem) {
            return bodyItem.lines;

        // Set Text
        if (tooltipModel.body) {
            var titleLines = tooltipModel.title || [];
            var bodyLines =;

            var innerHtml = '<thead>';

            titleLines.forEach(function(title) {
                innerHtml += '<tr><th>' + title + '</th></tr>';
            innerHtml += '</thead><tbody>';

            bodyLines.forEach(function(body, i) {
                var colors = tooltipModel.labelColors[i];
                var style = 'background:' + colors.backgroundColor;
                style += '; border-color:' + colors.borderColor;
                style += '; border-width: 2px';
                var span = '<span style="' + style + '"></span>';
                innerHtml += '<tr><td>' + span + body + '</td></tr>';
            innerHtml += '</tbody>';

            var tableRoot = tooltipEl.querySelector('table');
            tableRoot.innerHTML = innerHtml;

        // `this` will be the overall tooltip
        var position = this._chart.canvas.getBoundingClientRect();

        // Display, position, and set styles for font = 1; = 'absolute'; = position.left + window.pageXOffset + tooltipModel.caretX + 'px'; = + window.pageYOffset + tooltipModel.caretY + 'px'; = tooltipModel._bodyFontFamily; = tooltipModel.bodyFontSize + 'px'; = tooltipModel._bodyFontStyle; = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px'; = 'none';

ChartJSTooltip.js hosted with ❤ by GitHub

Tooltip Positioning

In introducing a custom tooltip element, you will come across a common error: the tooltip will be cut off by the edge of the chart. By having access to this new HTML element, we have complete control to style and position the tooltip element. I’ve taken the liberty of writing this code to responsively position the element within the bounds of the chart.

// Display and position tooltip = 1; = 'absolute';
const padding = 10;
const position = this._chart.canvas.getBoundingClientRect();

// Ensure Tooltip stays in view at far-left and far-right edges

const toolWidth = tooltipModel.width;
const graphWidth = lineGraph.width;
const caretPosition = tooltipModel.caretX;
const maxPosition = graphWidth - toolWidth;
const normalizedPosition = caretPosition + position.left;

if (caretPosition >= maxPosition) {
    //Move tooltip left by the excess amount with padding
    const xDif = caretPosition - maxPosition; = normalizedPosition - (xDif + padding) + 'px';
} else {
    //Return normal tooltip position = `${normalizedPosition}px`;

//Ensure Tooltip stays in view at top and bottom most positions

const toolHeight = tooltipModel.height;
const graphHeight = lineGraph.height;
const caretYPosition = tooltipModel.caretY;
const maxYPosition = graphHeight - toolHeight;
const normalizedYPosition = caretYPosition +;

if (caretYPosition >= maxYPosition) {
    const yDif = caretYPosition - maxYPosition; = normalizedYPosition - (yDif + padding) + "px";
} else { = `${normalizedYPosition}px`;

CustomXYPosition.js hosted with ❤ by GitHub

Written for readability. You could customize it to be more concise if you wanted.

This code snippet can be added underneath the provided tooltip in the documentation:

var position = this._chart.canvas.getBoundingClientRect();

In addition, the tooltipEl from our above positioning code can be styled like any regular html element. You could add a class or add properties directly on to

Customizing Data in the Tooltip

Without having to insert a custom HTML tooltip, we have a ton we can customize. Even the data we present within the tooltip. For instance, wouldn’t it be nice if we had a $ symbol in front of our dollar amounts for sales?

options: {
  //Customize chart options
  tooltips: {
      displayColors: false,
      titleFontSize: 16,
      bodyFontSize: 14,
      xPadding: 10,
      yPadding: 10,
      callbacks: {
          label: (tooltipItem, data) => {
              return `$ ${tooltipItem.value}`


DollarTooltipCustomized.js hosted with ❤ by GitHub

Callback function for customizing the tooltip label

In the above snippet, we return a template literal of the $ symbol with our given tooltip value. We’ve also removed the color block and increased font sizing.

Tooltip with $ symbol added to value

Fun Challenge

In the mockData.js file, we have a branchManagerData array with data for 3 branches, including the total sum for each week’s performance.

  1. We separated our chart “building” functionality into its own function.
  2. We build the chart in ComponentDidMount() and componentDidUpdate().
  3. We assign our chart instantiation to a variable that we declare at the top of our file.
  4. We check if the chart was built previously. If so, we use the destroy() method before we create our chart.

Return an array of values instead of a single value to get multiple lines like the example below:

return [Newark data, Austin data, Denver data];

Displaying branch data


Delving into ChartJS in a professional setting pushed me to improve design and customize the heck out of my set up. I had many pitfalls with HTML5 canvas, ChartJS, and React to get the data visualization results I wanted. Hopefully the problems (and solutions) in this article have helped you customize your chart to your liking.

Additional Resources:

If this article was helpful, be sure to leave 👏 or comments below.

Learn more

React - The Complete Guide (incl Hooks, React Router, Redux)

Modern React with Redux [2019 Update]

React Native - The Practical Guide

MERN Stack Front To Back: Full Stack React, Redux & Node.js

Full-Stack Web Apps with Meteor and React

Add emoji support to a React chatroom

Using Typescript with modern React (i.e. hooks, context, suspense)

Learn React 2019 - Full Course for Beginners - React 2019 Tutorial

Learn React.js - Frontend Web Development for Beginners - Web Development in 2019

Learn ReactJS with Webpack 4, Babel 7, and Material Design

*Originally published by Ryan Brockhoff on *

Autumn  Blick

Autumn Blick


How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

sophia tondon

sophia tondon


Top React JS Development Company | React JS Development Services

Looking to hire dedicated top Reactjs developers at affordable prices? Our 5+ years of average experienced Reactjs developers comprise proficiency in delivering the most complex and challenging web apps.

Hire ReactJS developers online on a monthly, hourly, or full-time basis who are highly skilled & efficient in implementing new technologies and turn into business-driven applications while saving your cost up to 60%.

Planning to** outsource React web Development services from India** using Reactjs? Or would you like to hire a team of Reactjs developers? Get in touch for a free quote!

#hire react js developer #react.js developer #react.js developers #hire reactjs development company #react js development india #react js developer

NBB: Ad-hoc CLJS Scripting on Node.js


Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.


Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

  • Fast startup without relying on a custom version of Node.js.
  • Small artifact (current size is around 1.2MB).
  • First class macros.
  • Support building small TUI apps using Reagent.
  • Complement babashka with libraries from the Node.js ecosystem.


Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).


Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
#js {:columns 216, :rows 47}
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
$ ls


Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.


NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.


To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [ :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"


Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink


(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))


Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
   (println "Doing stuff which takes a while")
   (sleep 1000)

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))
$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while

Also see API docs.


Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

  • destructuring using :syms
  • property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.


See the examples directory for small examples.

Also check out these projects built with nbb:


See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.



  • babashka >= 0.4.0
  • Clojure CLI >=
  • Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

  • Clone and cd into this repo
  • bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: 
License: EPL-1.0

#node #javascript

Mathew Rini


How to Select and Hire the Best React JS and React Native Developers?

Since March 2020 reached 556 million monthly downloads have increased, It shows that React JS has been steadily growing. React.js also provides a desirable amount of pliancy and efficiency for developing innovative solutions with interactive user interfaces. It’s no surprise that an increasing number of businesses are adopting this technology. How do you select and recruit React.js developers who will propel your project forward? How much does a React developer make? We’ll bring you here all the details you need.

What is React.js?

Facebook built and maintains React.js, an open-source JavaScript library for designing development tools. React.js is used to create single-page applications (SPAs) that can be used in conjunction with React Native to develop native cross-platform apps.

React vs React Native

  • React Native is a platform that uses a collection of mobile-specific components provided by the React kit, while React.js is a JavaScript-based library.
  • React.js and React Native have similar syntax and workflows, but their implementation is quite different.
  • React Native is designed to create native mobile apps that are distinct from those created in Objective-C or Java. React, on the other hand, can be used to develop web apps, hybrid and mobile & desktop applications.
  • React Native, in essence, takes the same conceptual UI cornerstones as standard iOS and Android apps and assembles them using React.js syntax to create a rich mobile experience.

What is the Average React Developer Salary?

In the United States, the average React developer salary is $94,205 a year, or $30-$48 per hour, This is one of the highest among JavaScript developers. The starting salary for junior React.js developers is $60,510 per year, rising to $112,480 for senior roles.

* React.js Developer Salary by Country

  • United States- $120,000
  • Canada - $110,000
  • United Kingdom - $71,820
  • The Netherlands $49,095
  • Spain - $35,423.00
  • France - $44,284
  • Ukraine - $28,990
  • India - $9,843
  • Sweden - $55,173
  • Singapore - $43,801

In context of software developer wage rates, the United States continues to lead. In high-tech cities like San Francisco and New York, average React developer salaries will hit $98K and $114per year, overall.

However, the need for React.js and React Native developer is outpacing local labour markets. As a result, many businesses have difficulty locating and recruiting them locally.

It’s no surprise that for US and European companies looking for professional and budget engineers, offshore regions like India are becoming especially interesting. This area has a large number of app development companies, a good rate with quality, and a good pool of React.js front-end developers.

As per Linkedin, the country’s IT industry employs over a million React specialists. Furthermore, for the same or less money than hiring a React.js programmer locally, you may recruit someone with much expertise and a broader technical stack.

How to Hire React.js Developers?

  • Conduct thorough candidate research, including portfolios and areas of expertise.
  • Before you sit down with your interviewing panel, do some homework.
  • Examine the final outcome and hire the ideal candidate.

Why is React.js Popular?

React is a very strong framework. React.js makes use of a powerful synchronization method known as Virtual DOM, which compares the current page architecture to the expected page architecture and updates the appropriate components as long as the user input.

React is scalable. it utilises a single language, For server-client side, and mobile platform.

React is steady.React.js is completely adaptable, which means it seldom, if ever, updates the user interface. This enables legacy projects to be updated to the most new edition of React.js without having to change the codebase or make a few small changes.

React is adaptable. It can be conveniently paired with various state administrators (e.g., Redux, Flux, Alt or Reflux) and can be used to implement a number of architectural patterns.

Is there a market for React.js programmers?
The need for React.js developers is rising at an unparalleled rate. React.js is currently used by over one million websites around the world. React is used by Fortune 400+ businesses and popular companies such as Facebook, Twitter, Glassdoor and Cloudflare.

Final thoughts:

As you’ve seen, locating and Hire React js Developer and Hire React Native developer is a difficult challenge. You will have less challenges selecting the correct fit for your projects if you identify growing offshore locations (e.g. India) and take into consideration the details above.

If you want to make this process easier, You can visit our website for more, or else to write a email, we’ll help you to finding top rated React.js and React Native developers easier and with strives to create this operation

#hire-react-js-developer #hire-react-native-developer #react #react-native #react-js #hire-react-js-programmer

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? React JS is developed by Facebook in the year 2013. There are many students and the new developers who have confusion between react and hooks in react. Well, it is not different, react is a programming language and hooks is a function which is used in react programming language.
Read More:-

#react #hooks in react #react hooks example #react js projects for beginners #what are hooks in react js? #when to use react hooks