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 (
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
Share your thoughts in the comments
Please Login to comment...