My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

What is Prime React? How to use it in create-react-app?

Siddharth Vishvanath (Sid)'s photo
Siddharth Vishvanath (Sid)
·Oct 20, 2020·

6 min read

Prime React is a react library, similar to the popular ones like Material UI, React Bootstrap, etc. But this has become one of my favorite React libraries because it gives me a lot of variety to use the component based on my needs. Also If you need to build an app that needs a lot of customization of elements Prime React is the library is the best choice. But, We will not be doing any customization for now.

If you need to know more about the library and its community you can go here. They also have tons of examples and they also have a Bit.dev collection if you are interested in seeing it, you can go here.

Now lets get's started.

Getting Started

Just like any other react library, it's very simple to set up the project. Firstly, we need to create a react app, then

npx create-react-app myprimeapp

then

npm install primereact primeicons classname react-transition-group

or you can use yarn

yarn add primereact primeicons classnames react-transition-group

After you have installed the package, you need to import its CSS into your index.js, just like bootstrap. Prime react provides a lot of themes, but we normally won't need any other theme, until and unless you want to be very picky about the colors.

Navigate to your index.js file and put these imports at the top of the file:

import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';

After you have imported the CSS styles, we can add an element to the page to see how it works. Prime React has a list of components that can be used, the strongest point about this library is that it has very good components for data visualization. It has built-in charts and graphs components that can be used to make analytics dashboards very quickly. In their documentation, they specify the list of 3rd party libraries they use to build their library. They use the following dependencies in their library.

  • Charts : Charts.js 2.1.x
  • GMap : Google Maps
  • Editor : Quill.js
  • FullCalendar : FullCalendar 4.0 Alpha.2+

They also use animation, CSS libraries such as "react-transition-group" and "classnames". We have already added them when we did the installation step.

Components Of Prime React

Lets build a small todo app, with prime react so that we can know more about this library. Firstly, we need to import a Card Component, one of the most important elements in many web apps are cards.

You can follow your own project structure or you can create a folder named components inside of your src folder. Inside the components folder create a folder named TodoInfoCard and inside that add a file named TodoInfoCard.js.

image.png

For such a small you may not need to actually add folder and files, but its good to keep our structure clean.

Inside the TodoInfoCard.js:

import React from "react";
import { Card } from "primereact/card";
class TodoInfoCard extends React.Component {
  render() {
    return <Card>Content</Card>;
  }
}

export default TodoInfoCard;

After creating the component, add the following in your App.js file:

import TodoInfoCard from "./components/TodoInfoCard/TodoInfoCard";
import { Card } from "primereact/card";

import "./app.css";

class App extends React.Component {
render() {
  return (
    <div className="App">
      <TodoInfoCard />
    </div>
  );
 }
}
export default App;

After you add the Card, you can see a card extending to full width of the screen, like below:

image.png

Now, let's add some style to it, we can give the whole card a dark background color with a nice shadow. We also want the text to be bold and white.

Go to your app.css file so that we can add our custom classes.

Since this is a very small app, it would not take much time to design our component, but if we have a lot of components that are dynamic and need to have different styles, the app.css would become cumbersome. In order to avoid such a situation, I prefer to use the Tailwind CSS library. For now, we won't be using it, but I will write an article about it soon.

app.css file:



.customCard {
  width: 560px;
  background-color: #2b2d42;
  font-weight: bold;
  color: white;
  -webkit-box-shadow: 14px 17px 25px -23px rgba(0, 0, 0, 1);
  -moz-box-shadow: 14px 17px 25px -23px rgba(0, 0, 0, 1);
  box-shadow: 14px 17px 25px -23px rgba(0, 0, 0, 1);
}

.cardHeader {
  text-align: left;
  padding: 10px 0px 0px 10px;
  color: white;
  font-size: 20px;
}

.cardContentClass {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content {
  width: 360px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Now add the styles in your file, go to app.js and add classNames to the component like this:

import React from "react";
import { Card } from "primereact/card";
class TodoInfoCard extends React.Component {
  render() {
    return (
      <Card className="customCard">
        <div className="cardContentClass">
          <div>Checkbox</div>
          <div className="content">Need To Add A State to the Function</div>
          <div>Status</div>
        </div>
      </Card>
    );
  }
}

export default TodoInfoCard;

After you add the style to the component, if you see your browser, it would look like this:

image.png

In order to make this component more dynamic, we need to send the props so that we can handle the state from our App component.

We can convert the TodoInfoCard.js to :

import React from "react";
import { Card } from "primereact/card";
class TodoInfoCard extends React.Component {
  render() {
    return <Card className="customCard">{this.props.children}</Card>;
  }
}

export default TodoInfoCard;

we just need to ask for the children, so we have more flexibility on the content inside it. Now add this code to your App.js,

import React from "react";
import TodoInfoCard from "./components/TodoInfoCard/TodoInfoCard";
import "./styles.css";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <TodoInfoCard>
          <div className="cardContentClass">
            <div>Checkbox</div>
            <div className="content">Need To Add A State to the Function</div>
            <div>Status</div>
          </div>
        </TodoInfoCard>
      </div>
    );
  }
}
export default App;

The output should remain the same because we are sending the same component.

That will all for this initial setup. I will continue adding the state and many more components from Prime React to this App in my next article. Let me know your thoughts about this library.