It also includes custom styles using SASS.
Table of Contents
npm install -S -E bkn-ui
Or using yarn.
yarn add -E bkn-ui
It has some peer dependencies, so if you not installed them, you have to.
yarn add -E email@example.com react react-mdc-web reactstrap
Note: reactstrap has some peer dependencies as well. See more details in Dependencies section in their website for more details.
All Bootstrap styles are located in SASS files. For example, if you want to import styles for
We are about to see how to implement an application layout that will be composed by a Drawer, a Main Nav, a User dropdown menu and an Welcome message.
This is the end result:
Let's start by
// LayoutExample.tsximport * as React from 'react';import SFC from 'react';import Layout from 'bkn-ui';const LayoutExample: SFC<> =<Layout="App Name"="App Name"/>;LayoutExampledisplayName = 'LayoutExample';
This will render a
<MainNav> component on top (like an application bar) and a
<Drawer> on the left. A button that toggles the
<Drawer> will be rendered by default on
<MainNav> in left side and on top of
<Drawer> as well.
<Layout> we added two props.
drawerHeaderTitle prop will render App Name text on top of
mainNavTitle prop will render same text in left side of
<Drawer> doesn't have any content besides a title. Let's add some content.
import Nav NavItem NavLink from 'reactstrap';const drawerContent =<Nav ><NavItem><NavLink="toggle-drawer active"="#">Link 1</NavLink></NavItem><NavItem><NavLink="toggle-drawer"="#">Link 2</NavLink></NavItem></Nav>;// code omitted for brevityconst LayoutExample: SFC<> =<Layout=="App Name"="App Name"/>;
As you can see, there's an
import statement from reactstrap, instead of bkn-ui. This is because reactstrap is a peer dependency in bkn-ui and a lot of reactstrap components wasn't cutomized by bkn-ui. See reactstrap components for more details.
drawerContent prop was added to
<Layout>, holding the drawer content.
Now, let's add a user menu in the right side of
import UserMenu UserMenuImage from 'bkn-ui';const userMenuImage =<UserMenuImage=""="John Doe"/>;const userMenu =<UserMenu =><div><div ="d-block"><strong>John Doe</strong></div><div ="d-block">johndoe@beakyncom</div><div ="d-block"><a ="dropdown-menu-link" ="#">Logout</a></div><div ="dropdown-divider" /><div ="d-block"><small>v100</small></div></div></UserMenu>;// code omitted for brevityconst LayoutExample: SFC<> =<Layout=="App Name"=="App Name"/>;
<UserMenu> renders a dropdown menu. We just add some content to it, as well as an image using
Then we passed this to
We don't have anything in our layout body. Let's add an welcome message using
import Welcome from 'bkn-ui';// code omitted for brevityconst LayoutExample: SFC<> =<Layout=="App Name"=="App Name"><Welcome ="John Doe">This is the Welcome component</Welcome></Layout>;
So, we just include
<Welcome> component as a child of
<Layout>. Then we passed some content to it.
Okay, let's beautify our UI.
First, we create a
LayoutExample.scss file and import the base theme and styles for the components we are using (layout and welcome).
Then we simply import that style file in our typescript file.
// LayoutExample.tsximport './LayoutExample.scss';
Note: see Theming section for more details.
Ok, but if you see the result, you'll see that welcome message has not a good spacing with main nav. Let's fix that in next section.
To fix spacing between
<Welcome> we going to use the
<PageBody> components. They work as a
<Layout> body adding spacing and a custom scrollbar to the content.
import Page PageBody from 'bkn-ui';// code omitted for brevityconst LayoutExample: SFC<Props> = appName<Layout====><Page><PageBody><Welcome ="John Doe">This is the Welcome component</Welcome></PageBody></Page></Layout>;
Also we need to add styles for
<Welcome> in our SASS file.
// LayoutExample.scss// code omitted for brevity
That's it! Now go see Components section.
Create an issue describing clearly the new feature or problem.
Create a branch with issue name.
Generate bundle and types by running:
npm run build
Bump version in package.json based on SemVer.
Create a PR and inform what issue is closed. For example:
Approve and merge PR.
Publish to npm:
Create a tag for current version. For example:
git tag 1.0.0
Push tag to Github.
git push --tags
Write change log in tag body based on merged PRs. Example here.
Be happy. =]