Bedrock is a ReactJS UI component library built using Typescript.
It uses Bootstrap 5 CSS framework for styling. bedrock
still follows the
classic way of including CSS in HTML file to decouple the design system from component
library and also to improve load performance by leveraging browser caching. The library
is published as browser-compatible ESM version. Thus, you can directly leverage the
component library in your importmap
and point it to the latest version.
-
The
bedrock.css
file includes all definitions from the correspondingbootstrap.css
file and thus includingbedrock.css
should be sufficient in your project. -
The library is built and tested against the latest versions (as of date):
- React 18.2.0 (runtime dependency)
- Bootstrap 5.2.3 (dev dependency)
- Node 20 (dev dependency)
-
CSS file needs to be currently manually included in your
index.html
file. In future, once CSS import assertionsimport styles from './bedrock.css' assert { type: 'css }
become available, this requirement will be removed.
-
Add
@sangupta/bedrock
as a dependency in yourpackage.json
-
Update dependencies as:
# using npm
$ npm install --save @sangupta/bedrock
# using yarn
$ yarn add @sangupta/bedrock
- Include the
bedrock.css
file in yourindex.html
file as:
<link href="node_modules/@sangupta/bedrock/dist/bedrock.css" rel="stylesheet">
- Use the components in your application:
import React from 'react';
import { Button } from '@sangupta/bedrock';
const HelloWorld = () => {
return <Button label='Hello World' />
}
// for React 16/17
import ReactDOM from 'react-dom';
ReactDOM.render(<HelloWorld />, document.getElementById('root'));
// for React 18
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container!);
root.render(<HelloWorld />);
MIT License. Copyright (c) 2022, Sandeep Gupta.