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 corresponding bootstrap.css
file
and thus including bedrock.css
should be sufficient in your project.
The library is built and tested against the latest versions (as of date):
CSS file needs to be currently manually included in your index.html
file. In future,
once CSS import assertions import styles from './bedrock.css' assert { type: 'css }
become available, this requirement will be removed.
Add @sangupta/bedrock
as a dependency in your package.json
Update dependencies as:
# using npm
$ npm install --save @sangupta/bedrock
$ yarn add @sangupta/bedrock
3. Include the `bedrock.css` file in your `index.html` file as:
```sh
<link href="https://github.com/sangupta/bedrock/blob/main/node_modules/@sangupta/bedrock/dist/bedrock.css" rel="stylesheet">
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.