BlueprintJS

  • Last Updated : 02 May, 2022

BlueprintJS is a React-based UI toolkit for the web. It is written in Typescript. This library is very optimized and popular for building interfaces that are complex data-dense for desktop applications that runs in a modern web browser. It is optimized for building complex data-dense interfaces for desktop applications. Blueprint is available as an NPM package @blueprintjs scope. This is not a mobile-first UI toolkit.

Install: Install the package and its dependencies with an NPM client through npm or yarn:

npm i @blueprintjs/core
// or
yarn add @blueprintjs/core react react-dom

After installation, you’ll be able to import the React components in your application like –

import { Button } from "@blueprintjs/core";

Don’t forget to include the main CSS file from each Blueprint package, Additionally, the directory contains supporting media.

Using node-style package resolution in a CSS file: 

@import "~normalize.css";
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";

Add the below link inside head section of the page.

<link href=”path/to/node_modules/normalize.css/normalize.css” rel=”stylesheet” />
<link href=”path/to/node_modules/@blueprintjs/core/lib/css/blueprint.css” rel=”stylesheet” />
<link href=”path/to/node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css” rel=”stylesheet” />

Blueprint components require the following ES2015 features:

  • Map
  • Set
  • Array.prototype.fill
  • Array.prototype.from
  • String.prototype.startsWith
  • Object.values

TypeScript: Blueprint is written in TypeScript, and it is having its own “.d.ts” file, therefore its “.d.ts” type definitions are distributed in the NPM package and should be resolved automatically by the compiler. 

However, you’ll need to install typing for Blueprint’s dependencies before you can consume it:

npm install --save @types/react @types/react-dom

Blueprint’s declaration files require TypeScript 3.8 or newer for certain language features.

Example:

Javascript

import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css';
import { Button } from "@blueprintjs/core";

function App() {
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <Button> Button</Button> <br></br>
            <Button icon="refresh">Icon Button</Button>
        </div>
    );
}

export default App;

Step to run the application: Open the terminal and type the following command.

npm start

Output:

 

Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above

My Personal Notes arrow_drop_up