Forem: Sampson Ovuoba

Visually building Tailwind CSS components using Flowbite and Daisy UI

Sampson Ovuoba — Wed, 14 Aug 2024 13:55:02 +0000

I recently posted about building this in the tailwindcss subreddit, and it got a lot of attention. So, I decided to write a step-by-step process on how to do this and provide a better tutorial.

Tailwind CSS is a powerful utility-first framework that makes building custom designs fast and efficient. With component libraries like Flowbite and Daisy UI, you can speed up development even further by using pre-designed, customizable components.

Now combined with a visual builder, you can achieve faster development times and higher design consistency, while also reducing the need for extensive coding.

Flowbite offers a wide range of ready-to-use components like buttons, modals, and navigation bars, all fully responsive and customizable to fit your design needs. Its extensive documentation ensures you can quickly integrate these components into your projects.

DaisyUI simplifies your code by reducing the need for long class names. It offers customizable components with built-in dark mode and multiple themes, making it easier to build and style web projects efficiently.

Windframe ties it all together with its powerful visual editor, allowing you to easily drag and drop Flowbite and Daisy UI components to create your designs intuitively. With real-time visualization and feedback, you can effortlessly customize your interfaces on the fly, significantly reducing the need for extensive coding. This streamlined process makes it quicker and easier to craft visually appealing and highly functional interfaces.

Here’s how to visually build Flowbite and Daisy UI components using Windframe:

Tutorial: How to Visually Build Flowbite and Daisy UI Components Using Windframe

Step 1: Access the Windframe Visual Builder

Start by opening the Windframe Editor and creating a new project

Step 2: Install Flowbite and Daisy UI

Click the Import button within the Windframe interface to access the library options.

Click on Install Flowbite or Install Daisy UI to add either of these component libraries to your project. The selected library will be automatically installed in the editor.

Step 3: Import Flowbite and Daisy UI

With Flowbite or Daisy UI installed, you can import their components into the editor and visually edit them. We will be using Flowbite in this example and importing a component from the team block section.
- First, copy the code of the block from Flowbite. Then, click the import button and select the HTML import option.
- Paste the copied code from Flowbite into the modal. Finally, click the import button again to import it into the editor. The component should now be imported into the editor.

Step 4: Start Visual building and editing

Customize the components using the visual editor, adjusting styles, and properties to fit your design requirements.

Step 5: Export Your Project

When you’re satisfied with your design, you can also export the project to continue working on it outside the platform or share it with others.

Integrating Flowbite and Daisy UI components into your projects with Windframe is super easy! Just follow these steps, and you'll be up and running in no time. If you need more help, check out this short video.

Conclusion
Pairing Tailwind CSS with Flowbite, Daisy UI, and Windframe's visual builder significantly enhances your development workflow. Flowbite and Daisy UI offer pre-designed, customizable components, while Windframe allows for intuitive, real-time interface customization. This powerful combination reduces coding time, ensures design consistency, and enables developers to quickly create visually appealing and functional interfaces.

Comment any other libraries you would like to see added next

Tailwind 3.0 is finally available. here are all the major Changes

Sampson Ovuoba — Mon, 10 Jan 2022 01:16:04 +0000

Tailwind 3.0 version is finally available. The Tailwind 3.0 version addresses some issues found on the version 1 and 2 and includes a variety of features that are in handy when creating any project.

These features include upgrade on the Just-in-Time, all the time. It also boosts browser performance with less build time, stackable variety, arbitrary value support and lots of more functionality.

We are going to look at some of these features, new utilities that were introduced in the Tailwind 3.0 version and how to upgrade from your version to it.

Feature of the new Tailwind 3.0

Just-in-Time, all the time

This feature was introduced last year March. This feature allows you to use Tailwind CSS in your project without having to install it. Just-in-Time engine brought so many changes including arbitrary values and made complex configuration a thing of the past. The new Tailwind 3.0 has made the engine more stable and improved its performance. This in turn has improved all Tailwind projects.

Colored box shadow

This is a new feature in the Tailwind 3.0 version. This allows you to add shadows to your colored buttons or cards while building your project. You can check out the Tailwind documentation to learn more.

Multi-column layout

The Tailwind 3.0 has a multi-column layout that is especially useful when building footers. You can now easily add different styles for your footer and get it looking unique. You can check the Tailwind docs for more information.

Scroll snap API

Among the new features added are a set of utilities that you can use to make CSS scroll snap module. This will give you the tool to build rich snap scroll on your HTML. Giving you the experience of a life time.

Every color out of the box

Before now, other versions of Tailwind had a restricted color palette. Because the developers worried about the size of these feature. Now with the new Tailwind 3.0 they can use all variety of colors. This color palette will be enabled by default when you upgrade to the tailwind 3.0.

Native form control styling

It was a bit tricky to customize the native form controls in the previous versions. This problem has been tackled well in the tailwind 3.0 version which included support for the new accent-color property, as well as a modifier for customizing file input buttons.

Print modifier

The new print features allow you to style how you want your website to appear to people when they print it.

Modern aspect ratio API

Tailwind support the aspect ratio property in It’s previous version but in order to use it you need to customize it. However, with its growing browser support, the new Tailwind 3.0 now have support for the new native property.

RTL and LTR modifiers

One of the interesting utilities that were added with this new Tailwind 3.0 version is the experimental support for multi-directional layouts. This property allows you to move objects either right or left using the property ‘rtl’ and ‘ltr’ modifiers.

Arbitrary properties

The most exciting part of these Tailwind 3.0 version is adding the arbitrary properties. You can now use arbitrary CSS which you can combine with other properties such as ‘hover’, ‘sm’, and any other properties you wish.

CDN tailwind

In the new Tailwind 3.0 version one of the new features that makes it different is the addition of CSS-based CDN. So instead of building some kind of CSS library they instead made of JavaScript library for Tailwind which is really exciting. So, for all your HTML documents you can easily add a CDN for tailwind and begin to use all Tailwind CSS features immediately.

Other interesting utilities that were added include landscape and portrait properties, touch-action, will-change, flex-basis, text-indent, scroll-behavior, fancy underline properties, and more.

How to upgrade to the new Tailwind 3.0 version

To upgrade your Tailwind v2 or v1 to the v3.0 is as easy as possible and you can be ready to start using it in less than 40 minutes. I will walk you through upgrading any of the version you have to the Tailwind v3.0 here.

You can upgrade your Tailwind CSS, PostCSS and autoprefixer using the following npm command

Code


npm install -D tailwindcss@latest postcss@latest autoprefixer@latest.

The Tailwind 3.0 actually uses a PostCSS 8 no longer the PostCSS 7. So, you need to upgrade to the PostCSS 8 in order to use this. It is recommended you use the Tailwind CLI to opposed to installing Tailwind as a PostCSS plugin.

You can visit the official Tailwind CSS documentation upgrade website to see all the changes that have been made on the Tailwind plugins, using the CDN and migrating to JIT engine.

You can of course take a look at their github to see in details all the changes they have made for this Tailwind 3.0.

Conclusion

The Tailwind CSS version 3.0 is a leap in the framework. It was done with incredible care and with the other users in mind. The migration from the other versions is as smoothly as possible.
It will be a shame not to try this new Tailwind 3.0 because it comes with a lot of utilities other versions didn’t have and will make your work flow a lot easier.

Create Stunning Websites and Web Apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented
template and UI components. Learn more about contrast.

Resources

You may also find the following resources useful

How to create a beautiful progress bar using bootstrap and Contrast

Sampson Ovuoba — Tue, 20 Apr 2021 01:16:04 +0000

How to create linear and circular progress bars in react.

Progress bar is a component which displays progress of a process in which user are involved. Their color, shape, and animation can be customized with the contrast progress bar component.
Contrast also known as CDBReact is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites, and web apps.

Prerequisites

The progress bars would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact but the following are necessary:

JavaScript knowledge
Basic React Knowledge
Basic Bootstrap knowledge
NPM installed

The circular progress bar should look like the image below

Setup

First Check that you have node installed. To do this, run the following command in your terminal.

Code

node-v

This should show you the current version of node you have installed on your machine.

If you don’t have nodejs installed, download it here.

Installing node also installs npm on your PC but you can still confirm using npm-v. Now that we have node installed, we can start up our React project by going to the directory of our choice and running

Code:

npx create-react-app progressbar-app

I named the project progressbar-app but you can use any name of your choice.

Installing CDBReact-pro

In order to use the date-picker you need to use the pro version. And you can Install the cdbreact-pro package in your project (we recommend adding the file to the root of the project.) by running

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Circular progress bar

Let us go ahead to create a file named circularpro.js which would contain our progress bar component. Import the various progress bar components that we’ll be using.

Code:

import React from "react";
import { CDBCircularProgress, CDBContainer } from "cdbreact-pro";

in the code above, we import React from react and two components from the CDBReact which are:

CDBContainer
CDBCircularProgress.

Code:


export const Progress = () => {
  return (
    <CDBContainer>
            <CDBCircularProgress
              value={25}
              max={100}
              min={0}
              text={`${25}%`}
            />
            <CDBCircularProgress
              value={50}
              max={100}
              min={0}
              text={`${50}%`}
              color="primary"
            />
            <CDBCircularProgress
              value={95}
              max={100}
              min={0}
              color="secondary"
              text={`${95}%`}
            />
            <CDBCircularProgress
              value={35}
              max={100}
              min={0}
              color="danger"
              text={`${35}%`}
            />
            <CDBCircularProgress
              value={47}
              max={100}
              min={0}
              color="info"
              text={`${47}%`}
            />
            <CDBCircularProgress
              value={100}
              max={100}
              min={0}
              color="success"
              text={`${100}%`}
            />
    </CDBContainer>
  );
};

export default Progress;

In the code above, we added some styling to the circular progress bar to make it look appealing.

Now, we can render the component in the app.js.
Code:

import './App.css';
import tab from './ circularpro.js ';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
       <Progress  />
      </div>
    </Router>
  );
}

export default App;

The page will look like the image below.

Linear progress bar

For the linear progress bar we will create a file named linearpro.js which would contain our progress bar component.

Installing CDBReact-pro

In order to use the date-picker you need to use the pro version. And you can Install the cdbreact-pro package in your project (we recommend adding the file to the root of the project.) by running

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Our linear progress bar should look like this image below when we are done

Import the various progress bar components that we’ll be using.

Code:

import React from "react";
import { CDBProgress, CDBContainer } from "cdbreact-pro";

the code above imported React from react, the CDBProgress and the CDBContainer from cdbreact

Code:

export const Progress = () => {
  return (
    <CDBContainer>
              <CDBProgress
                value={10}
                text={`${10}%`}
                colors="primary"
              />
              <CDBProgress
                value={20}
                text={`${20}%`
                colors="secondary"
              />
              <CDBProgress
                value={70}
                text={`${70}%`}
                colors="success"
              />
              <CDBProgress
                value={40}
                text={`${40}%`}
                colors="danger"
              />
              <CDBProgress
                value={90}
                text={`${90}%`}
                colors="info"
              />
              <CDBProgress
                value={60}
                text={`${60}%`}
                colors="warning"
              />
    </CDBContainer>
  );
};
export default Progress;

This code adds features to the linear progress bar and is enclosed in a CDBContainer component from contrast.

Code:

import './App.css';
import tab from './ linearpro.js ';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
       < Progress />
      </div>
    </Router>
  );
}
export default App;

in this code we rendered our circular progress bar in our app.js file.

Your page should look like the image below

Resources

How to create a beautiful datatable with icons using bootstrap and Contrast on React.

Sampson Ovuoba — Tue, 20 Apr 2021 01:16:04 +0000

DataTables are components that mix tables with advanced options like searching, sorting and pagination.
Today, we’ll be creating a DataTables in react using a react library knows as Contrast. Contrast also known as CDBReact is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites, and web apps.

Prerequisites

The DataTables would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact but the following are necessary:

JavaScript Knowledge
Basic React Knowledge
Basic Bootstrap Knowledge
JavaScript Knowledge
NPM installed

The DataTable we will be building is show below

Setup

First Check that you have node installed. To do this, run the following command in your terminal.

node -v

This should show you the current version of node you have installed on your machine.
If you don’t have node.js installed, download it here.
Installing node also installs npm on your PC but you can still confirm using npm-v. Now that we have node installed, we can start up our React project by going to the directory of our choice and running

npx create-react-app datatables-app

I named the project datatables-app but you can use whatever name of your choice.

Install CDBReact

Now, we have to install CDBReact in our project
Run the following command to install CBDReact

Code:

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

Code:

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.
Now run npm start to make sure that everything works well and there are no errors.
DataTables
The first thing we will do at this stage is to create a file that would house our datatable main codes. I named the file DataTable.js. you can of course name it anything you wish. In the file import some datatable component from contrast and react from react.

Code:

import React from "react";
import { 
    CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer 
  } from "cdbreact-pro";

In the code above, we imported some component from contrast that is important in building the dataTable. These are the conmponents

CDBCard which is used to build a card structure for the table
CDBCardBody which is used to create the body of the card which holds the table.
CDBDataTable this component holds the date, the row and column
CDBRow this component is used to create the row of the data table
CDBCol this component is used to build the column of the datatable
CDBContainer this component houses the entire code for the dataTable.

Code:

const DataTable = () => {

  function testClickEvent(param) {
    alert("Row Click Event");
  }

  const data = () => {
    return ({
      columns: [
        {
          label: "Name",
          field: "name",
          width: 150,
          attributes: {
            "aria-controls": "DataTable",
            "aria-label": "Name",
          },
        },
        {
          label: "Position",
          field: "position",
          width: 270,
        },
        {
          label: "Office",
          field: "office",
          width: 200,
        },
        {
          label: "Age",
          field: "age",
          sort: "asc",
          width: 100,
        },
        {
          label: "Start date",
          field: "date",
          sort: "disabled",
          width: 150,
        },
        {
          label: "Salary",
          field: "salary",
          sort: "disabled",
          width: 100,
        },
      ],

      rows: [
        {
          name: "Tiger Nixon",
          position: "System Architect",
          office: "Edinburgh",
          age: "61",
          date: "2011/04/25",
          salary: "$320",
          clickEvent: () => testClickEvent(1),
        },
        {
          name: "Garrett Winters",
          position: "Accountant",
          office: "Tokyo",
          age: "63",
          date: "2011/07/25",
          salary: "$170",
        },
        {
          name: "Ashton Cox",
          position: "Junior Technical Author",
          office: "San Francisco",
          age: "66",
          date: "2009/01/12",
          salary: "$86",
        },
        {
          name: "Cedric Kelly",
          position: "Senior Javascript Developer",
          office: "Edinburgh",
          age: "22",
          date: "2012/03/29",
          salary: "$433",
        },
        {
          name: "Airi Satou",
          position: "Accountant",
          office: "Tokyo",
          age: "33",
          date: "2008/11/28",
          salary: "$162",
        },
        {
          name: "Brielle Williamson",
          position: "Integration Specialist",
          office: "New York",
          age: "61",
          date: "2012/12/02",
          salary: "$372",
        },
        {
          name: "Herrod Chandler",
          position: "Sales Assistant",
          office: "San Francisco",
          age: "59",
          date: "2012/08/06",
          salary: "$137",
        },
        {
          name: "Rhona Davidson",
          position: "Integration Specialist",
          office: "Tokyo",
          age: "55",
          date: "2010/10/14",
          salary: "$327",
        },
        {
          name: "Colleen Hurst",
          position: "Javascript Developer",
          office: "San Francisco",
          age: "39",
          date: "2009/09/15",
          salary: "$205",
        },
        {
          name: "Sonya Frost",
          position: "Software Engineer",
          office: "Edinburgh",
          age: "23",
          date: "2008/12/13",
          salary: "$103",
        },
        {
          name: "Jena Gaines",
          position: "Office Manager",
          office: "London",
          age: "30",
          date: "2008/12/19",
          salary: "$90",
        },
        {
          name: "Quinn Flynn",
          position: "Support Lead",
          office: "Edinburgh",
          age: "22",
          date: "2013/03/03",
          salary: "$342",
        },
        {
          name: "Charde Marshall",
          position: "Regional Director",
          office: "San Francisco",
          age: "36",
          date: "2008/10/16",
          salary: "$470",
        },
        {
          name: "Haley Kennedy",
          position: "Senior Marketing Designer",
          office: "London",
          age: "43",
          date: "2012/12/18",
          salary: "$313",
        },
        {
          name: "Tatyana Fitzpatrick",
          position: "Regional Director",
          office: "London",
          age: "19",
          date: "2010/03/17",
          salary: "$385",
        },
        {
          name: "Michael Silva",
          position: "Marketing Designer",
          office: "London",
          age: "66",
          date: "2012/11/27",
          salary: "$198",
        },
        {
          name: "Paul Byrd",
          position: "Chief Financial Officer (CFO)",
          office: "New York",
          age: "64",
          date: "2010/06/09",
          salary: "$725",
        },
        {
          name: "Gloria Little",
          position: "Systems Administrator",
          office: "New York",
          age: "59",
          date: "2009/04/10",
          salary: "$237",
        },
        {
          name: "Bradley Greer",
          position: "Software Engineer",
          office: "London",
          age: "41",
          date: "2012/10/13",
          salary: "$132",
        },
        {
          name: "Dai Rios",
          position: "Personnel Lead",
          office: "Edinburgh",
          age: "35",
          date: "2012/09/26",
          salary: "$217",
        },
        {
          name: "Jenette Caldwell",
          position: "Development Lead",
          office: "New York",
          age: "30",
          date: "2011/09/03",
          salary: "$345",
        },
        {
          name: "Yuri Berry",
          position: "Chief Marketing Officer (CMO)",
          office: "New York",
          age: "40",
          date: "2009/06/25",
          salary: "$675",
        },
        {
          name: "Caesar Vance",
          position: "Pre-Sales Support",
          office: "New York",
          age: "21",
          date: "2011/12/12",
          salary: "$106",
        },
        {
          name: "Doris Wilder",
          position: "Sales Assistant",
          office: "Sidney",
          age: "23",
          date: "2010/09/20",
          salary: "$85",
        },
        {
          name: "Angelica Ramos",
          position: "Chief Executive Officer (CEO)",
          office: "London",
          age: "47",
          date: "2009/10/09",
          salary: "$1",
        },
        {
          name: "Gavin Joyce",
          position: "Developer",
          office: "Edinburgh",
          age: "42",
          date: "2010/12/22",
          salary: "$92",
        },
        {
          name: "Jennifer Chang",
          position: "Regional Director",
          office: "Singapore",
          age: "28",
          date: "2010/11/14",
          salary: "$357",
        },
        {
          name: "Brenden Wagner",
          position: "Software Engineer",
          office: "San Francisco",
          age: "28",
          date: "2011/06/07",
          salary: "$206",
        },
        {
          name: "Fiona Green",
          position: "Chief Operating Officer (COO)",
          office: "San Francisco",
          age: "48",
          date: "2010/03/11",
          salary: "$850",
        },
        {
          name: "Shou Itou",
          position: "Regional Marketing",
          office: "Tokyo",
          age: "20",
          date: "2011/08/14",
          salary: "$163",
        },
        {
          name: "Michelle House",
          position: "Integration Specialist",
          office: "Sidney",
          age: "37",
          date: "2011/06/02",
          salary: "$95",
        },
        {
          name: "Suki Burks",
          position: "Developer",
          office: "London",
          age: "53",
          date: "2009/10/22",
          salary: "$114",
        },
        {
          name: "Prescott Bartlett",
          position: "Technical Author",
          office: "London",
          age: "27",
          date: "2011/05/07",
          salary: "$145",
        },

        {
          name: "Donna Snider",
          position: "Customer Support",
          office: "New York",
          age: "27",
          date: "2011/01/25",
          salary: "$112",
        },
      ],
    });
  };

  return (
    <CDBContainer>
      <CDBCard>
        <CDBCardBody>
          <CDBDataTable
            striped
            bordered
            hover
            entriesOptions={[5, 20, 25]}
            entries={5}
            pagesAmount={4}
            data={data()}
            materialSearch={true}
          />
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default DataTable;

We used the different components from contrast to create the following table above. We also added some styling to the components to help make the table more presentable.
In the code below, we are going to render the DataTable component on the app.js

Code:

import './App.css';
import DataTable from './DataTable';
import Reactdom from "react-dom";

function App() {
  return (
    <div className="App">
      <DataTable />
    </div>
  );
}

export default App;

Our page should look like the image below:

Conclusion
Datatable are easy to build using contrast which you have seen. You can also use several tools including bootstrap styling without installing bootstrap to create your datatable and make it to suit you. You can also check out some other features you can use in CDBReact DataTable Docs.

Resources

CDBReact DataTable Docs

Link to code on github

Get Contrast Pro

Create Stunning Websites and Web Apps

Building different custom components in react for your web apps or websites can get very stressful. Thats why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. Try contrast pro!

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc. project with a clean, well documented, well crafted template and UI components. Learn more about Contrast Pro

Resources

How to create a beautiful stepper using bootstrap and Contrast

Sampson Ovuoba — Tue, 20 Apr 2021 01:16:04 +0000

How to create a stepper component in react using bootstrap and Contrast.

Stepper is a component that displays content as a process with defined by user milestones. Following steps are separated and connected by buttons.
This is a great solution for a variety of registration forms, where you don't want to scare the user with loads of fields and questions.
Stepper can be aligned vertically as well as horizontally.

Examples of React Bootstrap steps use:

Registration form
Payment gateway
Tutorial with steps

We are going to look at how to create this stepper today using a react library known as contrast.

Contrast also known as CDBReact is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites, and web apps.

To use stepper you need to download the pro version here.

Prerequisites

The stepper would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact but the following are necessary:

Basic React Knowledge
JavaScript knowledge
Basic Bootstrap knowledge
NPM installed

Setup

First Check that you have node installed. To do this, run the following command in your terminal.

Code:

node-v

This should show you the current version of node you have installed on your machine.
If you don’t have nodejs installed, download it here.
Installing node also installs npm on your PC but you can still confirm using npm-v. Now that we have node installed, we can start up our React project by going to the directory of our choice and running

Code:

npx create-react-app stepper-app

I named the project Stepper-app but you can use any name of your choice.

Installing CDBReact-pro

Before we install our CDBReact we have to download the pro version here first. Then, we can go ahead to install them in our project. It is advised to add the file to the root of the project by running:

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Stepper

We can now create a file named stepper.js. This is where we are going to import the stepper and other components. This is also where we will be writing our code.
The contrast stepper component must first be imported before using it.

Code:

import React, { useState } from "react";
import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from "cdbreact-pro";

In the code we imported some imported components we need to build a stepper. They include

CDBStepper
CDBStep
CDBInput
CDBBtn
CDBContainer

Code:

const Stepper = () => {

  const [active, setActive] = useState(1)

  const handleNextPrevClick = (a) => {
    setActive(a)
  };

  const handleSubmission = () => {
    alert("Form submitted!");
  };

  return (
    <CDBContainer className="d-flex">
      <CDBContainer style={{ height: "500px", width: "150px" }}>
        <CDBStepper direction="vertical">
          <CDBStep
            id={1}
            far
            icon="folder-open"
            name="Basic Information"
            handleClick={() => handleNextPrevClick(1)}
            active={active}
          />
          <CDBStep
            id={2}
            icon="pencil-alt"
            name="Personal Data"
            handleClick={() => handleNextPrevClick(2)}
            active={active}
          />
          <CDBStep
            id={3}
            icon="dragon"
            name="Terms and Conditions"
            handleClick={() => handleNextPrevClick(3)}
            active={active}
          />
          <CDBStep
            id={4}
            icon="check"
            name="Finish"
            handleClick={() => handleNextPrevClick(4)}
            active={active}
          />
        </CDBStepper>
      </CDBContainer>
      <CDBContainer
        style={{
          height: "500px",
          width: "100%",
          display: "flex",
          alignItems: "center",
        }}
      >
        {active === 1 && (
          <CDBContainer md="12">
            <h3
              className="font-weight-bold pl-0 my-4 "
              style={{
                width: "100%",
                fontSize: "30px",
                textAlign: "center",
              }}
            >
              Your Information
            </h3>
            <CDBInput label="Email" className="mt-4" />
            <CDBInput label="username" className="mt-4" />
            <CDBInput label="Password" className="mt-4" />
            <CDBInput label="Repeat Password" className="mt-4" />
            <CDBBtn
              color="dark"
              block
              flat
              className="float-right"
              onClick={() => handleNextPrevClick(2)}
            >
              Next
            </CDBBtn>
          </CDBContainer>
        )}
        {active === 2 && (
          <CDBContainer md="12">
            <h3
              className="font-weight-bold pl-0 my-4"
              style={{
                width: "100%",
                fontSize: "30px",
                textAlign: "center",
              }}
            >
              Personal Data
            </h3>
            <CDBInput label="First Name" className="mt-3" />
            <CDBInput label="Second Name" className="mt-3" />
            <CDBInput label="Surname" className="mt-3" />
            <CDBInput label="Address" type="textarea" rows="2" />
            <CDBBtn
              color="light"
              flat
              className="float-left"
              onClick={() => handleNextPrevClick(1)}
            >
              Previous
            </CDBBtn>
            <CDBBtn
              color="dark"
              flat
              className="float-right"
              onClick={() => handleNextPrevClick(3)}
            >
              Next
            </CDBBtn>
          </CDBContainer>
        )}
        {active === 3 && (
          <CDBContainer md="12">
            <h3
              className="font-weight-bold pl-0 my-4"
              style={{
                width: "100%",
                fontSize: "30px",
                textAlign: "center",
              }}
            >
              Terms and conditions
            </h3>
            <CDBInput
              label="I agreee to the terms and conditions"
              type="checkbox"
              id="checkbox3"
            />
            <CDBInput
              label="I want to receive newsletter"
              type="checkbox"
              id="checkbox4"
            />
            <CDBBtn
              color="light"
              className="float-left"
              flat
              onClick={() => handleNextPrevClick(2)}
            >
              Previous
            </CDBBtn>
            <CDBBtn
              color="dark"
              className="float-right"
              flat
              onClick={() => handleNextPrevClick(4)}
            >
              Next
            </CDBBtn>
          </CDBContainer>
        )}
        {active === 4 && (
          <CDBContainer md="12">
            <h3
              className="font-weight-bold pl-0 my-4"
              style={{
                width: "100%",
                fontSize: "30px",
                textAlign: "center",
              }}
            >
              Finish
            </h3>
            <h2 className="text-center font-weight-bold my-4">
              Registration completed!
            </h2>
            <CDBBtn
              color="light"
              flat
              className="float-left"
              onClick={() => handleNextPrevClick(3)}
            >
              Previous
            </CDBBtn>
            <CDBBtn
              color="success"
              flat
              className="float-right"
              onClick={handleSubmission}
            >
              Submit
            </CDBBtn>
          </CDBContainer>
        )}
      </CDBContainer>
    </CDBContainer>
  );
};

export default Stepper;

In the above code, we added styling to the various components we have imported to create the stepper.

Code

import './App.css';
import Stepper from './stepper';

function App() {
  return (
    <Router>
      <div className="App">
        <Stepper />
      </div>
    </Router>
  );
}

export default App;

Conclusion

Building a stepper using contrast is quite simple and allows you to use several tools including bootstrap styling without installing bootstrap to create your stepper. You can also check out some other features you can use in CDBReact Stepper Docs . you can also check the code here in our github.

Create Stunning Websites and Web Apps

Resources

How to create a beautiful select with icons using bootstrap and Contrast on React.

Sampson Ovuoba — Tue, 20 Apr 2021 01:16:04 +0000

The Select component is a form control, that after the click displays a collapsible list of multiple values which can be used in forms, menus or surveys.

Select enables you to use ↑ and ↓ arrow keys to navigate through options and use ↵ key to select required option (works for stateful select). We are going to look at how to create a select using contrast.

Contrast also known as CDBReact is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites, and web apps.

Prerequisites

The Select would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact but the following are necessary:

JavaScript Knowledge
Basic React Knowledge
Basic Bootstrap knowledge
NPM installed

The select page with the icon, we are going to build looks like the image below

Setup

First Check that you have node installed. To do this, run the following command in your terminal.

Code:

node-v

Code:

npx create-react-app select-app

I named the project select-app but you can use whatever name of your choice.
Select with icon
Going forward, we need to create a file named select.js which would contain our select component. Then, we can Import the select component that we’ll be using. It is important you download the pro version of contrast to use the select with icons.

Installing CDBReact-pro

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Code:

import React, { useState } from "react";
import { CDBSelect, CDBContainer } from "cdbreact-pro";

Here, we imported the useState from react including CDBSelect and CDBContainer from contrast.
we can now go ahead to create the select with icon and add styling to them according to our preference. In order to use the select with icons you need to download the pro version of contrast.

Code:

export const Select = () => {
  const [option] = useState([
    {
      text: "Select Option",
      icon:"stack-overflow",
    },
    {
      text: "Another Option",
      icon:"reddit",
    },
    {
      text: "Option 3",
      icon:"instagram",
    },
    {
      text: "Option 4",
    },
    {
      text: "Last Option",
    },
  ]);
  return (
    <CDBContainer>
            <CDBSelect2 
              options={option} 
              iconBrand 
              selected="Choose an option" 
              color="white"
            />
    </CDBContainer>
  );
};

export default Select;

In the above code, the select component is created and the various style and icons are added.
Let us go ahead to import the created select component into our app component

Code:

import './App.css';
import Select from './select';
import Reactdom from "react-dom";

function App() {
  return (
    <div className="App">
      <Select />
    </div>
  );
}

Reactdom.render(<App />, document.getElementById('root'));

Our page should look like this

A select using contrast is quite simple and allows you to use several tools including bootstrap styling without installing bootstrap to create your select with icon.

Resources

CDBReact Select Docs

Link to code on github

Get Contrast Pro

Create Stunning Websites and Web Apps

Resources

How to create a beautiful multiselect using Contrast in React.

Sampson Ovuoba — Tue, 20 Apr 2021 01:16:04 +0000

Multi-select is a form control, that after the click displays a collapsable list of multiple values. This is especially important in creating forms, menus or surveys. Multi-select enables you to use ↑ and ↓ arrow keys to navigate through options and use ↵ key to select required option.

We are going to look at how to create this multi-select drop-down with search today using a react library known as contrast.

Contrast also known as CDBReact is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites, and web apps. To use multi-select drop-down with search you need to download the pro version here.

Prerequisites

The multi-select drop-down with search would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact but the following are necessary:

Basic React Knowledge
JavaScript knowledge
Basic Bootstrap knowledge
NPM installed

The multi-select we are going to create in this tutorial is going to look like this

Setup

First Check that you have node installed. To do this, run the following command in your terminal.

Code:

node-v

This should show you the current version of node you have installed on your machine.
If you don’t have nodejs installed, download it here..
Installing node also installs npm on your PC but you can still confirm using npm-v. Now that we have node installed, we can start up our React project by going to the directory of our choice and running

Code:

npx create-react-app multiselect-app

I named the project multiselect-app but you can use any name of your choice.

Install CDBReact

Now, we have to install CDBReact in our project
Run the following command to install CBDReact

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.
multi select dropdown with search
we can now create a file named multiselect.js. This is where we are going to import the multi-select and container component. This is also where we will be writing our code.

Import the multi-select and container components from CDBReact

Code:

import React from "react";
import { CDBMultiselect, CDBContainer } from "cdbreact-pro";

in the code below, we set up the features and styles for the multi-select.

export const Multiselect = () => {

// "showing" key:value pair optional
const option = [
    {
      text: "Value 1",
      showing: true,
    },
    {
      text: "Second Value",
      showing: true,
    },
    {
      text: "Third Value",
      showing: true,
    },
    {
      text: "Final Value",
      showing: true,
    },
];

In the code below, we have the search prop included in which you can change if you wish.

return (
  <CDBContainer>
    <CBDMultiselect 
      search 
      color="secondary" 
      options={option} 
      selected="value" 
    />
  </CDBContainer>
 );
};
export default Multiselect;

After you have styled and created the multiselect component. You can move to your app.js file and render the component on the App component.

Code:

import './App.css';
import Multiselect from './Multiselect';
import Reactdom from 'react-dom';

function App() {
  return (
    <Router>
      <div className="App">
       <Multiselect  />
      </div>                            
    </Router>
  );
}

Reactdom.render(<App />, document.getElementById('root'))

The page we created should look like the image below

Now we have create the Multi-select dropdown with a search using contrast.

Resources

CDBReact Multiselect Docs

Link to code on github

Get Contrast Pro

Create Stunning Websites and Web Apps

Resources

How to create beautiful forms using Contrast in React.

Sampson Ovuoba — Tue, 20 Apr 2021 01:16:04 +0000

React Bootstrap forms are input-based components which are designed to collect user data. Used as login, subscribe or contact form, all can be easily customized.

While creating CDB, we were aware of their importance in almost every project, so we have put a lot of effort to get them right.

Such constructions like predefined Form logins, Form registers, Form subscriptions or Form contacts and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.

We are going to look at how to create this multi-select drop-down with search today using a react library known as contrast.

Contrast also known as CDBReact is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites, and web apps.
To use the contact forms you need to download the pro version here.

Prerequisites

The contact forms would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact but the following are necessary:

Basic React Knowledge
JavaScript knowledge
Basic Bootstrap knowledge
NPM installed

The page will look like the image below

Setup

First Check that you have node installed. To do this, run the following command in your terminal.

Code

node-v

Code:

npx create-react-app signin-app

I named the project signin-app but you can use any name of your choice.

Install CDBReact

Now, we have to install CDBReact in our project

Run the following command to install CBDReact using NPM

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Sign in

Let us go ahead to create a file named signin.js which would contain our signin component. We will be writing our code here. Import the various signin components that we’ll be using.

Code:

import React from "react";
import { 
  CDBInput, 
  CDBCard, 
  CDBCardBody, 
  CDBIcon, 
  CDBBtn,
  CDBLink, 
  CDBContainer } from "cdbreact-pro";

In the code above, we imported the react from react and we also imported

CDBInput is used to build the input component
CDBCard is used to build the card structure of the sign in
CDBCardBody used to build the body of the sign in
CDBIcon is component allows you to add icons to the sign in
CDBBtn is the component that is used to build buttons in the sign in
CDBLink is the component that is used to build links for the sign in
CDBContainer is component holds the entire components used in building the sign in components from contrast.

Code:

const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: "30rem" }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
              <p className="h4"> Sign in </p>
          </div>
          <CDBInput material hint="E-mail" type="email" />
          <CDBInput material hint="Password" type="password" />
          <div
              className="d-flex flex-wrap justify-content-center align-items-center"
          >
              <CDBInput type="Checkbox" />
              <p className="m-0">Remember me</p>
              <CDBLink to="#">Forgot Password ?</CDBLink>
          </div>
          <CDBBtn
              color="dark"
              className="btn-block my-3 mx-0" >
              Sign in
          </CDBBtn>
          <p className="text-center">Not a member?
            <CDBLink className="d-inline p-0" to="#">
              Register
            </CDBLink>
          </p>
          <p className="text-center"> or sign in with</p>
          <div className="row my-3 d-flex justify-content-center">
            <CDBBtn
                color="white"
                style={{ boxShadow: "none" }}
            >
                <CDBIcon fab icon="facebook-f" />
            </CDBBtn>
            <CDBBtn
                color="white"
                className="m-0"
                style={{ boxShadow: "none" }}
            >
                <CDBIcon fab icon="twitter" />
            </CDBBtn>
            <CDBBtn
                color="white"
                style={{ boxShadow: "none" }}
            >
                <CDBIcon fab icon="google-plus-g" />
            </CDBBtn>
          </div>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};

export default Forms;

In the code above, we created the sign in form and included some styling in the different components in order to make them more appealing.

However, we must first render our component before we can see it display on our screen.

Code:

import './App.css';
import Forms from './signin';
import Reactdom from "react-dom";
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <Forms />
      </div>
    </Router>
  );
}

export default App;

The final page should look like the image below

Sign up form

The sign up form is used in several web apps to register for anything or even to recognize users on a platform.

Let's go ahead to create a file named signup.js which would contain our signup component. We will be writing our code here. Import the various signup components that we’ll be using.

Code:

import React from "react";
import { 
  CDBInput, 
  CDBCard, 
  CDBCardBody, 
  CDBIcon, 
  CDBBtn, 
  CDBLink,
  CDBContainer } from "cdbreact-pro";

In the code above, we imported the react from react and we also imported

CDBInput
CDBCard
CDBCardBody
CDBIcon
CDBBtn
CDBLink
CDBContainer components from contrast

Code:

const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: "30rem" }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4"> Sign up </p>
          </div>
          <div className="form-row mb-n4">
            <div className="col">
              <CDBInput material hint="First name" type="text" />
            </div>
            <div className="col">
              <CDBInput material hint="Last name" type="text" />
            </div>
          </div>
          <CDBInput material hint="E-mail" type="email" />
          <p className="text-muted text-center small mt-n4">
            At least 8 characters and 1 digit
          </p>
          <CDBInput material hint="Password" type="password" />
          <CDBInput material hint="Phone number" type="text" />
          <p className="text-muted text-center small mt-n4">
            Optional - for two step authentication
          </p>
          <div 
            className="d-flex justify-content-center align-items-center mt-4"
          >
            <CDBInput type="Forms" />
            <p className="m-0">Subscribe to our newsletter</p>
          </div>
          <CDBBtn
            color="dark"
            className="btn-block my-3 mx-0"
          >
              Sign up
          </CDBBtn>
          <p className="text-center"> or sign up with</p>
          <div className="row mb-3 d-flex justify-content-center">
            <CDBBtn
              color="white"
              className="m-0"
              style={{boxShadow:"none"}}
            >
              <CDBIcon fab icon="facebook-f" />
            </CDBBtn>
            <CDBBtn
              color="white"
              className="m-0"
              style={{boxShadow:"none"}}
            >
              <CDBIcon fab icon="twitter" />
            </CDBBtn>
            <CDBBtn
              color="white"
              className="m-0"
              style={{boxShadow:"none"}}
            >
              <CDBIcon fab icon="google-plus-g"/>
            </CDBBtn>
          </div>
            <p className="text-center m-0">
              Already have an account? 
              <CDBLink className="d-inline p-0" to="#">
                Sign In
              </CDBLink>
            </p>
          <hr/>
          <p className="text-center">
            By clicking <em>Sign up</em> you agree to our 
            <CDBLink className="d-inline p-0" to="#">
              terms of service
            </CDBLink>
          </p>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};

export default Forms;

In the code above, the different components are used to create the body of the sign up contact form. We also included some styling and added social media contact in the sign up page.

The next step is to render the signup form in our app.js file.

Code:

import './App.css';
import Forms from './signup';
import Reactdom from "react-dom";
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
       <Forms  />
      </div>
    </Router>
  );
}

export default App;

The signup page should look like the image below.

Newsletter subscription

The newsletter subscription page will house your contact information to help business owners reach their customers and subscribers easily. The page we are going to create will look like the image below

Install CDBReact

Now, we have to install CDBReact in our project. Run the following command to install CBDReact

npm install --save cdbreact

Or using Yarn

yarn add cdbreact

Let's go ahead to create a file named newsletter.js which would contain our signup component. We will be writing our code here. First we will Import the various components that we’ll be using.

Code:

import React from "react";
import { 
  CDBInput, 
  CDBCard, 
  CDBCardBody, 
  CDBIcon, 
  CDBBtn, 
  CDBLink, 
  CDBContainer } from "cdbreact";

In the code above, we imported the react from react and we also imported

CDBInput
CDBCard
CDBCardBody
CDBIcon
CDBBtn
CDBLink
CDBContainer components from contrast

Now, we are going to write the function that will display the newsletter subscription form.

Code:

const Forms = () => {
  return (
    <CDBContainer>
      <CDBCard style={{ width: "30rem" }}>
        <CDBCardBody className="mx-4">
          <div className="text-center mt-4 mb-2">
            <p className="h4">Subscribe</p>
          </div>
          <p className="text-center mt-4 font-weight-light">
            Join our mailing list. We write rarely, but only the best content.
          </p>
          <CDBLink className="text-center p-0 font-weight-light" to="#">
            See the last newsletter
          </CDBLink>
          <CDBInput material hint="Name" type="text" />
          <CDBInput material hint="E-mail" type="email" />
          <CDBBtn
            color="dark"
            className="btn-block my-3 mx-0" >
              Subscribe
          </CDBBtn>
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};

export default Forms;

We added some styling to the components of the newsletter contact form and links to the social media contact.

Code:

import './App.css';
import Forms from './newsletter';
import Reactdom from "react-dom";
import { BrowserRouter as Router } from 'react-router-dom';


function App() {
  return (
    <Router>
      <div className="App">
       <Forms  />
      </div>
    </Router>
  );
}

Reactdom.render(<App />, document.getElementById('root'));

In the code above, we rendered the newsletter file in the app.js. This doesn’t require a pro version.

The final page will look like this

Conclusion

Contact forms are known to be used in creating sign in forms, sign up forms and newsletter which you can see is easier and much faster to create using contrast and gives you a lot of options to include bootstrap features without having to install it.

Resources

CDBReact Contact Form Docs.

Link to code on github.

Get Contrast Pro.

Create Stunning Websites and Web Apps

Resources

How to create a beautiful tables using bootstrap and Contrast on React.

Sampson Ovuoba — Tue, 20 Apr 2021 01:16:04 +0000

How to create different tables, editable tables in React using bootstrap and contrast.

Tables are component with basic tables features. They let you aggregate a huge amount of data and present it in a clear and orderly way.

React tables provide additional benefits like responsiveness, and the possibility to manipulate the styles of the tables. You can enhance your tables by adding buttons, checkboxes, panels, and many other additional elements. You can also use an advanced data tables options like sort, search or pagination.

Today, we’ll be creating a table in react using a react library knows as Contrast. Contrast also known as CDBReact is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites, and web apps.

Prerequisites

The tables would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact but the following are necessary:

JavaScript Knowledge
Basic React Knowledge
Basic Bootstrap Knowledge
JavaScript Knowledge
NPM installed

The table we will be creating will look like the image below

Setup

First Check that you have node installed. To do this, run the following command in your terminal.

node -v

npx create-react-app table-app

I named the project table-app but you can use whatever name of your choice.

Install CDBReact

Now, we have to install CDBReact in our project
Run the following command to install CBDReact

Code:

npm install --save cdbreact

Or using Yarn

Code:

yarn add cdbreact

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Table

There are different types of table available for you in contrast. This tables enable you to present your work in a concise and simple way. We are going to create a one of this table known as responsive table. First we create a file named table.js. then we write this code on them.

Code:

import React from "react";
import { CDBTable, CDBTableHeader, CDBTableBody, CDBContainer } from "cdbreact";

in the code above, we imported the table components to help us create different tables. These components include:

CDBTable is the table itself
CDBTableHeader is used to create the header for the table
CDBTableBody is used to create the body of the table
CDBContainer is houses the entire table components.

Code:

const Table = () => {
  return (
    <CDBContainer>
          <CDBTable responsive>
            <CDBTableHeader>
              <tr>
                <th>#</th>
                <th>First</th>
                <th>Second</th>
                <th>Third</th>
                <th>Fourth</th>
                <th>Fifth</th>
                <th>Sixth</th>
                <th>Seventh</th>
                <th>Last</th>
                <th>Handle</th>
              </tr>
            </CDBTableHeader>
            <CDBTableBody>
              <tr>
                <td>1</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>@email</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>@email</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>Name</td>
                <td>@email</td>
              </tr>
            </CDBTableBody>
          </CDBTable>
    </CDBContainer>
  );
};

export default Table;

In the code above, we created the table with the components we imported and included some styling to them.

Now, we are going to render the component into our app.js.

Code:

import './App.css';
import Table from './table';
import Reactdom from "react-dom";

function App() {
  return (
    <div className="App">
      <Table />
    </div>
  );
}

Reactdom.render(<App />, document.getElementById('root'));

Our page will look like the image below

Editable Table

With React Editable Bootstrap Table, you can add and remove rows and change text and information within cells. In-place editing on your website - based on JavaScript - is now easier and quicker.

The editable table we are going to create will look like the image below

You need to download the pro version of contrast to use the editable table in contrast. We can start up our React project by going to the directory of our choice and running

npx create-react-app editable-table-app

I named the project Editabletable-app but you can use whatever name of your choice.

Install CDBReact-pro

Install the cdbreact-pro package in your project (we recommend adding the file to the root of the project.) by running

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Code:

import React from "react";
import { CDBEditableTable, CDBCard, CDBCardBody, CDBContainer } from "cdbreact";

in the code above we imported the components we need for building editable table. These components include

CDBEditableTable.
CDBCard
CDBCardBody

Code:


const EditableTable = () => {
  const columns = ["Fullname", "Age", "Company Name", "City", "Country"];

  const data = [
    ["Guerra Cortez", 45, "Insectus", "San Francisco", "USA"],
    ["Elisa Gallagher", 31, "Portica", "London", "United Kingdom"],
    ["Aurelia Vega", 30, "Deepends", "Madrid", "Spain"],
    ["Guadalupe House", 26, "Isotronic", "Berlin", "Germany"]
  ];

  return (
    <CDBContainer>
        <CDBCard>
          <CDBCardBody>
            <CDBEditableTable striped bordered data={data} columns={columns}/>
          </CDBCardBody>
        </CDBCard>
    </CDBContainer>
  );
};

export default EditableTable;

In the code above, the components were used to build a card body and editable table and some styles were added to the components to enable it to be more presentable.

The next step is to render the components into the app.js

Code:

import './App.css';
import EditableTable from './Editabletable';

function App() {
  return (
    <Router>
      <div className="App">
        <EditableTable />
      </div>
    </Router>
  );
}

export default App;

The code above shows the editabletable components in the root app which allows the application to be presented in the web.

This is how the page will look like now

Conclusion

The editable table can be built easily into any number of your project and you can use some other features available in the contrast pro version to make your table to your style and preference.

Resources

CDBReact Tables Docs

Link to code on github

Get Contrast Pro

Create Stunning Websites and Web Apps

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc project with a clean, well documented, well crafted template and UI components. Learn more about Contrast Pro

Resources

How to create a beautiful Bootstrap Datatable with Icons

Sampson Ovuoba — Tue, 20 Apr 2021 01:16:04 +0000

How to create a datatable in react using Contrast

DataTables are components that mix tables with advanced options like searching, sorting and pagination. Today, we’ll be creating DataTables in react using a react library knows as Contrast. Contrast, also known as CDBReact, is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites and web apps.

Prerequisites

The react bootstrap DataTables would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact, but the following are necessary:

JavaScript Knowledge
Basic React Knowledge
Basic Bootstrap Knowledge
JavaScript Knowledge
NPM installed

The DataTable we will be building is show below

Setup

First, Check that you have node installed. To do this, run the following command in your terminal.node -v

This should show you the current version of node you have installed on your machine. If you don’t have node.js installed, download it here. Installing node also installs npm on your PC, but you can still confirm using npm-v. Now that we have node installed, we can start up our React project by going to the directory of our choice and running


npx create-react-app datatables-app

I named the project datatables-app, but you can use whatever name of your choice.

Install CDBReact

Now, we have to install CDBReact in our project Run the following command to install CBDReact

Code:


npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

Code:


yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project, as CDBReact does that for us upon installation. Now run npm start to make sure that everything works well and there are no errors.

DataTables

The first thing we will do at this stage is create a file that would house our datatable main codes. I named the file DataTable.js. You can, of course, name it anything you wish. In the file, import some datatable components from contrast and React from react.

Code:

import React from "react";
import {
    CDBCard, CDBCardBody, CDBDataTable, CDBRow, CDBCol, CDBContainer
  } from "cdbreact-pro";

In the code above, we imported some component from the contrast that is important in building the dataTable. These are the components

CDBCard which is used to build a card structure for the table
CDBCardBody is used to create the body of the card which holds the table.
CDBDataTable this component holds the date, the row and column
CDBRow this component is used to create the row of the data table
CDBCol this component is used to build the column of the datatable
CDBContainer this component houses the entire code for the dataTable.

Code:

const DataTable = () => {
  function testClickEvent(param) {
    alert('Row Click Event');
  }

  const data = () => {
    return {
      columns: [
        {
          label: 'Name',
          field: 'name',
          width: 150,
          attributes: {
            'aria-controls': 'DataTable',
            'aria-label': 'Name',
          },
        },
        {
          label: 'Position',
          field: 'position',
          width: 270,
        },
        {
          label: 'Office',
          field: 'office',
          width: 200,
        },
        {
          label: 'Age',
          field: 'age',
          sort: 'asc',
          width: 100,
        },
        {
          label: 'Start date',
          field: 'date',
          sort: 'disabled',
          width: 150,
        },
        {
          label: 'Salary',
          field: 'salary',
          sort: 'disabled',
          width: 100,
        },
      ],

      rows: [
        {
          name: 'Tiger Nixon',
          position: 'System Architect',
          office: 'Edinburgh',
          age: '61',
          date: '2011/04/25',
          salary: '$320',
          clickEvent: () => testClickEvent(1),
        },
        {
          name: 'Garrett Winters',
          position: 'Accountant',
          office: 'Tokyo',
          age: '63',
          date: '2011/07/25',
          salary: '$170',
        },
        {
          name: 'Ashton Cox',
          position: 'Junior Technical Author',
          office: 'San Francisco',
          age: '66',
          date: '2009/01/12',
          salary: '$86',
        },
        {
          name: 'Cedric Kelly',
          position: 'Senior Javascript Developer',
          office: 'Edinburgh',
          age: '22',
          date: '2012/03/29',
          salary: '$433',
        },
        {
          name: 'Airi Satou',
          position: 'Accountant',
          office: 'Tokyo',
          age: '33',
          date: '2008/11/28',
          salary: '$162',
        },
        {
          name: 'Brielle Williamson',
          position: 'Integration Specialist',
          office: 'New York',
          age: '61',
          date: '2012/12/02',
          salary: '$372',
        },
        {
          name: 'Herrod Chandler',
          position: 'Sales Assistant',
          office: 'San Francisco',
          age: '59',
          date: '2012/08/06',
          salary: '$137',
        },
        {
          name: 'Rhona Davidson',
          position: 'Integration Specialist',
          office: 'Tokyo',
          age: '55',
          date: '2010/10/14',
          salary: '$327',
        },
        {
          name: 'Colleen Hurst',
          position: 'Javascript Developer',
          office: 'San Francisco',
          age: '39',
          date: '2009/09/15',
          salary: '$205',
        },
        {
          name: 'Sonya Frost',
          position: 'Software Engineer',
          office: 'Edinburgh',
          age: '23',
          date: '2008/12/13',
          salary: '$103',
        },
        {
          name: 'Jena Gaines',
          position: 'Office Manager',
          office: 'London',
          age: '30',
          date: '2008/12/19',
          salary: '$90',
        },
        {
          name: 'Quinn Flynn',
          position: 'Support Lead',
          office: 'Edinburgh',
          age: '22',
          date: '2013/03/03',
          salary: '$342',
        },
        {
          name: 'Charde Marshall',
          position: 'Regional Director',
          office: 'San Francisco',
          age: '36',
          date: '2008/10/16',
          salary: '$470',
        },
        {
          name: 'Haley Kennedy',
          position: 'Senior Marketing Designer',
          office: 'London',
          age: '43',
          date: '2012/12/18',
          salary: '$313',
        },
        {
          name: 'Tatyana Fitzpatrick',
          position: 'Regional Director',
          office: 'London',
          age: '19',
          date: '2010/03/17',
          salary: '$385',
        },
        {
          name: 'Michael Silva',
          position: 'Marketing Designer',
          office: 'London',
          age: '66',
          date: '2012/11/27',
          salary: '$198',
        },
        {
          name: 'Paul Byrd',
          position: 'Chief Financial Officer (CFO)',
          office: 'New York',
          age: '64',
          date: '2010/06/09',
          salary: '$725',
        },
        {
          name: 'Gloria Little',
          position: 'Systems Administrator',
          office: 'New York',
          age: '59',
          date: '2009/04/10',
          salary: '$237',
        },
        {
          name: 'Bradley Greer',
          position: 'Software Engineer',
          office: 'London',
          age: '41',
          date: '2012/10/13',
          salary: '$132',
        },
        {
          name: 'Dai Rios',
          position: 'Personnel Lead',
          office: 'Edinburgh',
          age: '35',
          date: '2012/09/26',
          salary: '$217',
        },
        {
          name: 'Jenette Caldwell',
          position: 'Development Lead',
          office: 'New York',
          age: '30',
          date: '2011/09/03',
          salary: '$345',
        },
        {
          name: 'Yuri Berry',
          position: 'Chief Marketing Officer (CMO)',
          office: 'New York',
          age: '40',
          date: '2009/06/25',
          salary: '$675',
        },
        {
          name: 'Caesar Vance',
          position: 'Pre-Sales Support',
          office: 'New York',
          age: '21',
          date: '2011/12/12',
          salary: '$106',
        },
        {
          name: 'Doris Wilder',
          position: 'Sales Assistant',
          office: 'Sidney',
          age: '23',
          date: '2010/09/20',
          salary: '$85',
        },
        {
          name: 'Angelica Ramos',
          position: 'Chief Executive Officer (CEO)',
          office: 'London',
          age: '47',
          date: '2009/10/09',
          salary: '$1',
        },
        {
          name: 'Gavin Joyce',
          position: 'Developer',
          office: 'Edinburgh',
          age: '42',
          date: '2010/12/22',
          salary: '$92',
        },
        {
          name: 'Jennifer Chang',
          position: 'Regional Director',
          office: 'Singapore',
          age: '28',
          date: '2010/11/14',
          salary: '$357',
        },
        {
          name: 'Brenden Wagner',
          position: 'Software Engineer',
          office: 'San Francisco',
          age: '28',
          date: '2011/06/07',
          salary: '$206',
        },
        {
          name: 'Fiona Green',
          position: 'Chief Operating Officer (COO)',
          office: 'San Francisco',
          age: '48',
          date: '2010/03/11',
          salary: '$850',
        },
        {
          name: 'Shou Itou',
          position: 'Regional Marketing',
          office: 'Tokyo',
          age: '20',
          date: '2011/08/14',
          salary: '$163',
        },
        {
          name: 'Michelle House',
          position: 'Integration Specialist',
          office: 'Sidney',
          age: '37',
          date: '2011/06/02',
          salary: '$95',
        },
        {
          name: 'Suki Burks',
          position: 'Developer',
          office: 'London',
          age: '53',
          date: '2009/10/22',
          salary: '$114',
        },
        {
          name: 'Prescott Bartlett',
          position: 'Technical Author',
          office: 'London',
          age: '27',
          date: '2011/05/07',
          salary: '$145',
        },

        {
          name: 'Donna Snider',
          position: 'Customer Support',
          office: 'New York',
          age: '27',
          date: '2011/01/25',
          salary: '$112',
        },
      ],
    };
  };

  return (
    <CDBContainer>
      <CDBCard>
        <CDBCardBody>
          <CDBDataTable
            striped
            bordered
            hover
            entriesOptions={[5, 20, 25]}
            entries={5}
            pagesAmount={4}
            data={data()}
            materialSearch={true}
          />
        </CDBCardBody>
      </CDBCard>
    </CDBContainer>
  );
};
export default DataTable;

We used the different components from Contrast to create the following bootstrap Data table above. We also added some styling to the components to help make the react Bootstrap Data table more presentable. In the code below, we are going to render the Data Table component on the app.js.

Code:


import './App.css';
import DataTable from './DataTable';
import Reactdom from "react-dom";

function App() {
  return (
    <div className="App">
      <DataTable />
    </div>
  );
}

export default App;

Our page should look like the image below:

Conclusion

Boostrap Datatable are easy to build using Contrast which you have seen. You can also use several tools, including bootstrap styling without installing bootstrap, to create your Bootstrap datatable template and make it suit you. You can also check out some other features you can use in CDBReact DataTable Docs.

Resources

How to create a beautiful tabs using bootstrap and Contrast

Sampson Ovuoba — Tue, 20 Apr 2021 01:16:04 +0000

How to Create a beautiful tab component in react using bootstrap and Contrast.

Tabs are components which separate content placed in the same wrapper, but in the separate pane. Only one pane can be displayed at the time.
Today, we’ll be creating a tab in react using a react library knows as Contrast. Contrast also known as CDBReact is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites, and web apps.
CDB Tabs are compatible with ReactRouter, meaning that <NavLink> components inside can be used both for one-page tabs and general routing solution for main navigation. Make sure to include the wrapping <BrowserRouter>.
If you are using navs to provide a navigation bar, be sure to add an appropriate role attributes to the <NavLinks> (role="tab").

Prerequisites

The tab would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact but the following are necessary:

JavaScript Knowledge
Basic React Knowledge
Basic Bootstrap Knowledge
JavaScript Knowledge
NPM installed

The tab we are going to build requires the pro version and it will look like the image below

Setup
First Check that you have node installed. To do this, run the following command in your terminal.

node -v

npx create-react-app tab-app

I named the project tab-app but you can use whatever name of your choice.

Installing CDBReact-pro

Before we install our CDBReact we have to download the pro version first. Then, we can go ahead to install them in our project. It is advised to add the file to the root of the project by running.

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Our tab would be making use of the Navlink component from React router, so let us install it by running the command below.

Code:

npm install react-router-dom

Now run npm start to make sure that everything works well and there are no errors.
Before we proceed, let’s go ahead and wrap our app with the BrowserRouter component from react-router-dom as Navlinks can’t work outside it.

Code:

import './App.css';
import Tab from './tab';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">

      </div>
    </Router>
  );
}

export default App;

TAB

At the stage we will have to create a file named tab.js which would contain our Tab component. Import the various tab components that we’ll be using.

Code:

import React from "react";
import { CDBNav, CDBTabLink, CDBTabContent, CDBTabPane, CDBContainer } from "cdbreact";
import { NavLink } from react-router-dom;

in the file above, we imported some CDBReact for the tab.
-CDBNav for the navigation of the web.
-CDBTabLink for links in the tab.
-CDBTabContent contains the main body of the tab.
-CDBTabPane contains the pane of the tab.
-CDBContainer wraps the entire components of the tab.

Code:

const Tab = () => {
  return (
    <CDBContainer>
        <CDBContainer>
          <CDBNav className="nav-tabs mt-5">
            <CDBTabLink
              link
              to="#"
              active={this.state.activeItem === "1"}
              onClick={this.toggle("1")}
              role="tab"
            >
              Label 1
            </CDBTabLink>

            <CDBTabLink
              link
              to="#"
              active={this.state.activeItem === "2"}
              onClick={this.toggle("2")}
              role="tab"
            >
              Label 2
            </CDBTabLink>
            <CDBTabLink
              link
              to="#"
              active={this.state.activeItem === "3"}
              onClick={this.toggle("3")}
              role="tab"
            >
              Label 3
            </CDBTabLink>
          </CDBNav>
          <CDBTabContent activeItem={this.state.activeItem}>
            <CDBTabPane tabId="1" role="tabpanel">
              <p className="mt-2">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Nihil odit magnam minima, soluta doloribus reiciendis
                molestiae placeat unde eos molestias. Quisquam aperiam,
                pariatur. Tempora, placeat ratione porro voluptate odit
                minima.
              </p>
            </CDBTabPane>
            <CDBTabPane tabId="2" role="tabpanel">
              <p className="mt-2">
                Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                voluptate odit minima. Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Nihil odit magnam minima,
                soluta doloribus reiciendis molestiae placeat unde eos
                molestias.
              </p>
              <p>
                Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                voluptate odit minima. Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Nihil odit magnam minima,
                soluta doloribus reiciendis molestiae placeat unde eos
                molestias.
              </p>
            </CDBTabPane>
            <CDBTabPane tabId="3" role="tabpanel">
              <p className="mt-2">
                Quisquam aperiam, pariatur. Tempora, placeat ratione porro
                voluptate odit minima. Lorem ipsum dolor sit amet,
                consectetur adipisicing elit. Nihil odit magnam minima,
                soluta doloribus reiciendis molestiae placeat unde eos
                molestias.
              </p>
            </CDBTabPane>
          </CDBTabContent>
        </CDBContainer>
    </CDBContainer>
  );
};
export default Tab;

In the code above, we used CDBNav, CDBTabLink, CDBTabContent, CDBTabPane, CDBContainer to create the tab, add contents with some bootstrap styling which beautifies the tab.
Let us go ahead to import the created tab component into our app component

Code:

import './App.css';
import Tab from './tab';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
       <Tab />
      </div>
    </Router>
  );
}

export default App;

The tab we created will look like the image below

Conclusion

Building a tab using contrast is quite simple and allows you to use several tools including bootstrap styling without installing bootstrap to create your tab. You can also check out some other features you can use in CDBReact Tab Docs . you can also check the code here in our github.

Create Stunning Websites and Web Apps

Resources

How to create a beautiful datepicker using Contrast in React.

Sampson Ovuoba — Tue, 20 Apr 2021 01:16:04 +0000

Date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code. This can be accomplished by using contrast which also enables you to use whatever style you wish.
Contrast also known as CDBReact is a react library which is an Elegant UI kit with full bootstrap support that has reusable components for building mobile-first, responsive websites, and web apps.

Prerequisites

The datepicker and timepicker would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact but the following are necessary:

JavaScript knowledge
Basic React Knowledge
Basic Bootstrap knowledge
NPM installed

The datapicker we are going to build will look like this

Setup

First Check that you have node installed. To do this, run the following command in your terminal.

Code

node-v

Code:

npx create-react-app datepicker-app

I named the project datepicker-app but you can use any name of your choice.

Install CDBReact-Pro
Now, we have to install CDBReact in our project. In order to use the datepicker you need to download the pro version here. After the download you can now run the following command to install CBDReact.

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Datepicker

Let us go ahead to create a file named datepicker.js which would contain our datepicker component. Import the various datepicker components that we’ll be using.

Code:

import React, { useState } from "react";
import { CDBDatePicker, CDBContainer } from "cdbreact-pro";

in the code above, we imported the date picker component from contrast.
Let us go ahead and write the code for the body of the datepicker.

Code

const DatePicker = () => {
  const [value, onChange] = useState(new Date());

  return (
    <CDBContainer>
          <CDBDatePicker onChange={onChange} value={value} />
    </CDBContainer>
  );
};
export default DatePicker;

The code above shows the datepicker body code and functions with styling. We can now go ahead to render the code in our app.js

Code:

import './App.css';
import DatePicker from './datepicker.js';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
       <Datepicker />
      </div>
    </Router>
  );
}
export default App;

In the above code, it renders the datepicker on the app.js which shows on the web. Your work should look like this.

TIME PICKER

Code:

npx create-react-app timepicker-app

I named the project timepicker-app but you can use any name of your choice.

Install CDBReact:
Now, we have to install CDBReact in our project. In order to use the timepicker you need to download the pro version here. After the download you can now run the following command to install CBDReact

npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project as CDBReact does that for us upon installation.

Timepicker

Bootstrap material time picker is a component which uses a dialog to select a single time in hours: minutes format. The selected time is indicated by the filled circle at the end of the clock hand.
Let us go ahead to create a file named timepicker.js which would contain our timepicker component. Import the various timepicker components that we’ll be using.

Code

import React from "react";
import { CDBTimePicker, CDBContainer } from "cdbreact-pro";

In the code above, we imported the timepicker components

Code:

const TimePicker = () => {
  return (
    <CDBContainer>
        <CDBTimePicker placeholder="10:05 AM" theme="classic" colorPalette="dark" />
    </CDBContainer>
  );
};
export default TimePicker;

The code above shows the function of telling and setting time.
We can go ahead the render this timepicker on our app.js

Code:

import './App.css';
import TimePicker from './timepicker.js';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="App">
        <TimePicker  />
      </div>
    </Router>
  );
}

export default App;

Conclusion

TimePicker and Datepicker are simple to include in your project using contrast and allows for better styling features. You can also check out some other features you can use in CDBReact Datepicker Docs and CDBReact TimePicker Docs.