DEV Community: Salih Özdemir

Top React Component Libraries and Frameworks Every Developer Should Know

Salih Özdemir — Mon, 02 May 2022 08:06:37 +0000

React is the most popular JavaScript library for building user interfaces. It's easy to use, flexible, and powerful enough that you can build anything from simple apps to complex web applications with it! In this article, we're looking at some UI component frameworks which make developing your next project easier by providing ready-to-go components like buttons or navigation bars - saving time in both design creation as well as coding when getting started quickly.

Material UI

MUI offers a wide range of high-quality components that have helped us ship features more quickly. With nearly 77k+ stars on GitHub, the popularity of MUI is rather clear. The Google design system has been integrated into an extended React library with great success.

MUI is a brand, not just an open-source project. This means that they take care of the style and the documentation so that it all looks perfect; it's one that many people love and use daily!

The best part of MUI is how many people use it. There are countless free resources to help you get started. Landing page templates, mockups of blog designs, and portfolio styles are all available. If you can't find what you need, someone has probably already created it.

Features

A list of components that ready-to-use, free forever, and has accessibility.
Advance and powerful components for complex use-cases.
Fully built, out-of-the-box, templates for apps, landing pages, and more.

👉 Showcase

Ant Design

Ant Design is a UI library and design system for enterprise applications. It is the most popular components library on GitHub with over 79k stars.

It has great documentation that includes examples and variants. It is also a robust platform when it comes to customizing the existing components and themes in detail. Furthermore, It has a set of high-quality React components out of the box for free.

One of the drawbacks of Ant Design is that it has a large bundle size, when compared to other React libraries.

Features

Enterprise-class UI designed for web applications.
Written in TypeScript with predictable static types.
Internationalization support.
Powerful theme customization in every detail.

👉 Showcase

Chakra UI

Chakra UI is one of the fastest-growing React UI libraries. It is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. With over 22.5k stars on GitHub.

Simplicity is one of the terms that come to mind when describing Chakra UI. Its library, as its name suggests, emphasizes the development process rather than just focusing on code. It has excellent documentation will certainly aid with that.

Features

Makes it easy to style your components by passing props.
Flexible and composable wicth built on top of React UI Primitive.
All of components are accessible and its follow the WAI-ARIA guidelines specifications.
Most components are dark mode compatible.

👉 Showcase

Mantine

Mantine is a full-featured React component library with 100+ customizable components and 30+ hooks that allows you to create fully functional and accessible web applications quickly. Mantine has a lot of packages and components that are ready-to-use and can be used in any project. With over 10k stars on GitHub.

It stands out from other UI design systems with its simple structure and modularity.

Features

The core components are extremely extensive and provides niche components like color picker, date-range picker, and timelines.
Advanced theme customization and dark mode support.
A set of hooks that make it easy to use the components.
A full-featured notification system that integrates seamlessly with your theme.

👉 Showcase

Storybook

Storybook is a JavaScript tool that allows developers to create organized UI systems making both the building process and documentation more efficient and easier to use. With over 70k stars on GitHub.

It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.

Features

A sandbox to build UIs in isolation so you can develop hard-to-reach states and edge cases.
Implement components and pages without needing to fuss with data, APIs, or business logic.
Save use cases as stories in plain JavaScript to revisit during development, testing, and QA.
Use addons to customize your workflow, automate testing, and integrate with your favorite tools.

👉 Showcase

Refine

Refine A React-based framework for building internal tools, rapidly. It provides lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to admin panels, B2B applications and dashboards. With over 2.1k stars on Github even though it has been released recently.

Refine is a headless React framework, which means all out-of-the-box features(Routing, Networking, Authentication, Authorization, State Management, Realtime, i18n, etc.), it can be used without being tied to any UI elements or framework. Also, Ant Design as out-of-the-box is supported.

It has many examples to help you get started, as well as documentation. Also it is fully compatible with server side rendering with Next.js.

Features

Headless: Works with any UI framework
Zero-configuration: One-line setup with superplate. It takes less than a minute to start a project.
Out-of-the-box: Routing, networking, authentication, state management, i18n and UI.
Backend Agnostic: Connects to any custom backend.
Powerful UI: Works seamlessly with integrated Ant Design(It can also be used with any UI Framework).

👉 Showcase

Build internal tools using Low-Code with Refine, React-based framework

Salih Özdemir — Mon, 21 Feb 2022 08:05:21 +0000

When it comes to creating internal tools, low-code platforms are the way to go. With Refine, a React-based low-code platform, you can quickly build data-intensive applications without having to worry about scalability or ease of use. Other low-code platforms may allow you to develop your applications, but they are often limited in terms of flexibility and customizability. With Refine, you have full control over your application and can add any business logic that you need. So if you're looking for a platform that will let you build internal tools quickly and easily, Refine is the right choice!

What is Refine?

Refine is a React-based headless framework that allows you to build data-intensive applications quickly and with ease. Rapid development and headless at the same time how is it? Well, Refine supports Ant Design for quick and easy solutions. In addition, it allows you to use your design system, or to integrate with other popular design frameworks.

Refer to the Refine for more information.

Why you should use Refine?

It is Open Source under the MIT license.
Easy to use and it is easy to learn. There are many examples to help you get started, as well as documentation.
Is a framework that does not require you to use any UI libraries or frameworks.
Supports Ant Design for quick and easy solutions.
Backend agnostic, so you can connect to any backend you want.
Customizable, which means you can change it to fit your needs.
Refine is fully compatible with server side rendering with Next.js.

Features of Refine

Some of the main features of Refine are:

Data fetching and state management
Routings
Authentication
Authorization
Internationalization
Real-time
Mutation modes with optimistic and pessimistic and undoadable modes

How does Refine work?

Refine is completely agnostic; just wrap your application with the Refine component and pass the property you need. For example, it takes properties such as dataProvider to communicate with the API and authProvider to authentication. Then you have hooks that you can use throughout the whole application. These hooks are compatible with React Query.

To understand how Refine works, let's explore the following titles:

Communicate with the API

The dataProvider allows communication with the API. All the data fetching and mutations are done through this property.

A data provider must have the following properties:

const dataProvider = {
  create: ({ resource, variables, metaData }) => Promise,
  createMany: ({ resource, variables, metaData }) => Promise,
  deleteOne: ({ resource, id, metaData }) => Promise,
  deleteMany: ({ resource, ids, metaData }) => Promise,
  getList: ({ resource, pagination, sort, filters, metaData }) => Promise,
  getMany: ({ resource, ids, metaData }) => Promise,
  getOne: ({ resource, id, metaData }) => Promise,
  update: ({ resource, id, variables, metaData }) => Promise,
  updateMany: ({ resource, ids, variables, metaData }) => Promise,
};

Refine offers hooks to help you with data fetching and mutations using the data provider's properties. For example, when you use the useTable or useList hook, it will call the getList method underneath the hood.

Refer to the useTable and data hooks for more information.

For example, let's look at what happens when useTable is called.

import { List, Table, TextField, useTable } from "@pankod/refine-antd";

interface IPost {
  id: string;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
}

export const PostList: React.FC = () => {
  const { tableProps } = useTable({
    resource: "posts",
    initialSorter: [
      {
        field: "title",
        order: "asc",
      },
    ],
    initialFilter: [
      {
        field: "status",
        operator: "eq",
        value: "draft",
      },
    ],
  });

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="title" title="Title" />
        <Table.Column dataIndex="content" title="Content" />
      </Table>
    </List>
  );
};

The useTable in the example calls the getList method of the data provider with the following properties:

getList({
  resource: "posts",
  pagination: {
    page: 1,
    perPage: 10,
  },
  sort: [
    {
      field: "title",
      order: "asc",
    },
  ],
  filters: [
    {
      field: "status",
      operator: "eq",
      value: "draft",
    },
  ],
});

With metaData you can pass any parameters that you need to the data provider. You can handle it in the data provider.

All hooks that use data provider methods such as useTable work with React Query. So you can use all the features of React Query.

Refer to the dataProvider for more information.

Out-of-the-box data providers

Refine includes many out-of-the-box data providers to use in your projects like:

Add routing to the application

Refine needs some router functions to create resource pages, navigation, and so on. It uses the routerProvider property to pass the router functions to Refine. In this way, it allows you to use any router library that you want.

If you don't need any customization in your router, we not recommend making this provider. Instead, try nextjs-router for your Next.js project and react-router or react-location for your React project.

Refer to the routerProvider for more information.

Out-of-the-box router providers

Refine includes many out-of-the-box data providers to use in your projects like:

Create pages via `resources`

The main building blocks of a Refine app are resources. A resource is an entity in the API's endpoint (e.g., https://api.fake-rest.refine.dev/posts). It connects data from the API with page components, allowing pages to access data from the API.

import { Refine } from "@pankod/refine-core";
import dataProvider from "@pankod/refine-json-server";
import "@pankod/refine-antd/dist/styles.min.css";

import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";

const App: React.FC = () => {
  return (
    <Refine
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      resources={[
        {
          name: "posts",
          list: PostList,
          create: PostCreate,
          edit: PostEdit,
          show: PostShow,
        },
      ]}
    />
  );
};

export default App;

Each resource component is assigned a route by Refine. The /posts route, for example, displays the list page of the posts resource, which is implemented using the PostList component. The PostCreate component is the create page of the posts resource and it is rendered by the /posts/create route. The PostEdit component is the edit page of the posts resource and it is rendered by the /posts/edit/:id route. The PostShow component is the show page of the posts resource and it is rendered by the /posts/show/:id route.

Refine hooks used in these pages read some values from the route by default. For example, useForm hook takes the resource, action, and id from the route by default.

Authentication

The authProvider allows you to add authentication your application. You can use any authentication library that you want. All your authentication logic is managed with this authProvider.

A auth provider must have the following properties:

const authProvider = {
  login: () => Promise,
  logout: () => Promise,
  checkAuth: () => Promise,
  checkError: () => Promise,
  getPermissions: () => Promise,
  getUserIdentity: () => Promise,
};

Refine uses these methods via authorization hooks. Authentication and authorization procedures such as login, logout, checking user credentials, and catching HTTP errors are all handled using authorization hooks. For example, checkAuthis called when the user tries to access a page that requires authentication.

Refer to the authProvider for more information.

Out-of-the-box router providers

Auth0 - Source Code - Demo
Google - Source Code - Demo
OTP Login - Source Code - Demo

Authorization

Refine provides accessControlProvider that you can use to control who has access to what in your app. You can use any access control library that you want. In addition, you can choose the access control models that work best for you (RBAC, ABAC, ACL, etc.).

An accessControlProvider must have one async method called can to check if the person asking for access is allowed to have it.

type CanParams = {
    resource: string;
    action: string;
    params?: any;
};

type CanReturnType = {
    can: boolean;
    reason?: string;
}

const accessControlProvider = {
    can: ({ resource, action, params }: CanParams) => Promise<CanReturnType>;
}

useCan and <CanAccess> component use this method to check if the user is allowed to access.

For example, we can stop non-admin users from editing the post resource.

const App: React.FC = () => {
  <Refine
    accessControlProvider={{
      can: async ({ resource, action, params }) => {
        if (resource === "posts" && action === "edit") {
          const userRole = getUserRole();

          if (userRole === "admin") {
            return { can: true };
          }

          return Promise.resolve({
            can: false,
            reason: "Unauthorized",
          });
        }

        return Promise.resolve({ can: true });
      },
    }}
  />;
};

Refer to the accessControlProvider for more information.

Out-of-the-box access control providers

Casbin - Source Code - Demo
Cerbos - Source Code - Demo

Internationalization

The i18nProvider is used to give localization features to your application. This will allow you to change the text in your application to different languages.

An i18n provider must have the following properties:

const i18nProvider = {
  translate: (key: string, params: object) => string,
  changeLocale: (lang: string) => Promise,
  getLocale: () => string,
};

Refine uses these methods via translation hooks.

Refer to Refine i18nProvider for more details and how to use the react-i18next package.

Real-time support

The liveProvider is used to add real-time support to your application. You can use any real-time library or tool that you want.

A live provider must have the following properties:

const liveProvider = {
    subscribe: ({ channel, params: { ids }, types, callback }) => any,
    unsubscribe: (subscription) => void,
    publish?: (event) => void,
};

Refine data hooks are subscribed to using the subscribe method given with the live provider. The subscribe method returns a subscription object that can be used to unsubscribe. The unsubscribe method is used to unsubscribe from the subscription. The publish method is used to publish an event to the channel on the client side.

If you send an event after the relevant operations on the server, Refine will invalidate the related queries. If the liveMode is manual, queries of related resources are not invalidated in real-time; instead onLiveEvent is run with the event as new events from the subscription arrive.

Out-of-the-box access control providers

Ably - Source Code - Demo
Supabase - Source Code
Appwrite - Source Code

Other features of Refine

`notificationProvider`

The notificationProvider is used to display notifications to the user when mutations are performed. You can use any notification library that you want.

`mutationMode`

The mutationMode is used to determine how to handle mutations. You can use pessimistic optimistic or undoable mode. When using the pessimistic mode, UI updates are delayed until the mutation is confirmed by the server. When using the optimistic mode, UI updates are immediately updated. When using the undoable mode, UI updates are immediately updated, but you can undo the mutation.

`syncWithLocation`

If syncWithLocation is turned on, the list of query parameters may be modified manually by editing directly in the URL.

/posts?current=1&pageSize=8&sort[]=createdAt&order[]=desc

Check out all of Refine's features for more information.

Conclusion

If you're looking for a way to quickly and easily create an internal tool without sacrificing customization, Refine is worth checking out. It allows you to choose any library that you want for your requirements. Plus, if you need help or have feedback, the team at Refine is responsive and happy to help out. Give Refine a star on GitHub if you like it - your support will help us continue making this tool amazing!

Create a feedback admin panel in 15 minutes with refine and Strapi

Salih Özdemir — Mon, 04 Oct 2021 15:00:54 +0000

In this article, we will create a panel where we can manage the feedback we receive from our web application.

We will quickly create an api with Strapi.io and then develop its frontend with refine. Thus, let's see how an admin panel can be created in a very short time with the perfect harmony of Strapi and refine.

Features that our panel will have:

Authentication with strapi.io
A page to list feedbacks
Mutation on Feedbacks

Creating api with `Strapi`

Let's create our backend project with Strapi's quick start guide.

npx create-strapi-app strapi-feedback-api --quickstart

After the installation is complete, the tab will automatically open in the browser. Here, let's create a feedback collection with Content-Types Builder.

Quite simply, a feedback should have a description text field, A page text field that shows the page the feedback was sent from, and a type enumeration field indicating the type of feedback (issue, idea, other, archive).

Creating panel with `refine`

Let's create our frontend project with refine's setting up guide.

There are two alternative methods to set up a refine application. We will quickly create our application with superplate.

npx superplate-cli refine-feedback-client

Select the following options to complete the CLI wizard:

? Select your project type:
❯ refine

? What will be the name of your app:
refine-strapi-web

? Package manager:
❯ Npm

? Do you want to customize the theme?:
❯ No (Ant Design default theme)

? Data Provider :
❯ Strapi

? Do you want to customize layout?
❯ Yes, I want

? i18n - Internationalization:
❯ No

After the installation is completed, Strapi-specific data provider, auth provider, and also layout components that we can change the default view of Refine with the custom layout option will be included in our project.

Now, bootstrap the app with the following command:

npm run dev

Now let's list the changes we will make:

Change our Strapi API URL
Remove components that we will not use when changing the refinement look
Adding resources according to the collection name we created in Strapi

+ import { Refine } from "@pankod/refine";
import "@pankod/refine/dist/styles.min.css";
import { DataProvider } from "@pankod/refine-strapi";
import strapiAuthProvider from "authProvider";
import {
- Title,
  Header,
- Sider,
- Footer,
  Layout,
  OffLayoutArea,
} from "components";

function App() {
-  const API_URL = "your-strapi-api-url";
+  const API_URL = "http://localhost:1337";

  const { authProvider, axiosInstance } = strapiAuthProvider(API_URL);
  const dataProvider = DataProvider(API_URL, axiosInstance);
  return (
    <Refine
      dataProvider={dataProvider}
      authProvider={authProvider}
-     Title={Title}
      Header={Header}
-     Sider={Sider}
-     Footer={Footer}
      Layout={Layout}
      OffLayoutArea={OffLayoutArea}
      routerProvider={routerProvider}
      resources={[
        {
          name: "feedbacks",
        },
      ]}
    />
  );
}

export default App;

After adding the resource, our auth provider was activated.

Now let's create a user on the Strapi to be able to login to the application.

We created a user and login to the application with this user.

Let's customize the layout component, remove the sider and add a header.

import React from "react";
import { Layout as AntLayout } from "antd";

import { LayoutProps } from "@pankod/refine";

export const Layout: React.FC<LayoutProps> = ({
  children,
  Header,
  OffLayoutArea,
}) => {
  return (
    <AntLayout style={{ minHeight: "100vh", flexDirection: "row" }}>
      <AntLayout>
        <Header />
        <AntLayout.Content>
          {children}
          <OffLayoutArea />
        </AntLayout.Content>
      </AntLayout>
    </AntLayout>
  );
};

Let's customize the header component too

import React from "react";
import { Layout } from "antd";

export const Header: React.FC = () => {
  return (
    <Layout.Header
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "64px",
        backgroundColor: "#FFF",
        borderBottom: "1px solid #f0f0f0",
      }}
    >
      <img src="./refeedback.png" alt="refeedback" style={{ width: "250px" }} />
    </Layout.Header>
  );
};

In the new view, there are no siders anymore and the header we have customized is here.

Now we come to the part where we can list our feedback and make changes to it. Before that, let's create dummy feedback records on Strapi.

Create a FeedbackList.tsx file under the pages folder. Then, let's create our component as follows with the components and hooks that come with refine.

import {
  List,
  Typography,
  AntdList,
  useSimpleList,
  CrudFilters,
  Form,
  HttpError,
  Row,
  Col,
  Tag,
  Radio,
  Space,
  Descriptions,
  Button,
  DateField,
  Card,
  useUpdate,
} from "@pankod/refine";

import { IFeedback, IFeedbackFilterVariables, FeedBackType } from "interfaces";

const { Paragraph } = Typography;

const addTagColor = (type: FeedBackType) => {
  switch (type) {
    case "issue":
      return "error";
    case "idea":
      return "orange";
    default:
      return "default";
  }
};

export const FeedbackList: React.FC = () => {
  const { listProps, searchFormProps } = useSimpleList<
    IFeedback,
    HttpError,
    IFeedbackFilterVariables
  >({
    initialSorter: [{ field: "created_at", order: "desc" }],
    onSearch: (params) => {
      const filters: CrudFilters = [];
      const { type } = params;

      filters.push({
        field: "type",
        operator: "eq",
        value: type || undefined,
      });

      return filters;
    },
  });

  const { mutate, isLoading } = useUpdate();

  const renderItem = (item: IFeedback) => {
    const { id, description, type, page, created_at } = item;
    return (
      <AntdList.Item>
        <Card hoverable>
          <AntdList.Item.Meta
            description={
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <Tag
                  color={addTagColor(type)}
                  style={{ textTransform: "capitalize" }}
                >
                  {type}
                </Tag>
                <DateField format="LLL" value={created_at} />
              </div>
            }
          />
          <Paragraph strong>{description}</Paragraph>
          <Descriptions labelStyle={{ color: "grey", fontWeight: 600 }}>
            <Descriptions.Item label="Path">{page}</Descriptions.Item>
          </Descriptions>
          <div style={{ display: "flex", justifyContent: "end", gap: "4px" }}>
            <Button
              size="small"
              loading={isLoading}
              onClick={() =>
                mutate({
                  id,
                  resource: "feedbacks",
                  values: {
                    type: "archive",
                  },
                })
              }
            >
              Archive
            </Button>
          </div>
        </Card>
      </AntdList.Item>
    );
  };

  return (
    <List title="" pageHeaderProps={{ style: { height: "100%" } }}>
      <Row gutter={[64, 0]} justify="center">
        <Col xs={24} sm={24} md={4} lg={4} xl={4}>
          <Form
            {...searchFormProps}
            layout="vertical"
            onValuesChange={() => searchFormProps.form?.submit()}
            initialValues={{
              type: "",
            }}
          >
            <Form.Item label="FILTERS" name="type">
              <Radio.Group>
                <Space direction="vertical">
                  <Radio.Button value="">All</Radio.Button>
                  <Radio.Button value="issue">Issue</Radio.Button>
                  <Radio.Button value="idea">Idea</Radio.Button>
                  <Radio.Button value="other">Other</Radio.Button>
                  <Radio.Button value="archive">Archive</Radio.Button>
                </Space>
              </Radio.Group>
            </Form.Item>
          </Form>
        </Col>
        <Col xs={24} sm={24} md={14} lg={14} xl={14}>
          <AntdList
            {...listProps}
            split={false}
            renderItem={renderItem}
            itemLayout="vertical"
          />
        </Col>
      </Row>
    </List>
  );
};

export type FeedBackType = "idea" | "issue" | "other" | "archive";

export interface IFeedback {
  id: string;
  description: string;
  page: string;
  user: string;
  type: FeedBackType;
  created_at: Date;
}

export interface IFeedbackFilterVariables {
  type: FeedBackType;
}

In this component

We listed our records using the useSimpleList and Ant Design <List> component.
We used Antd <Form> component to filter our records.
We made it possible to change the type of our record with useUpdate

See detailed usage of useSimpleList for adding new filters, adding search entries, dynamic sorting operations and more here.

Let's develop feedback widget where we can get feedback to expand the application a little more. For this application, I will develop this component with refine, but you can create this component with Strapi APIs in any way you want.

You can look at the code of the component I developed here.

Now let's add this component to the OfflayouArea component and create feedback on the page and see how it comes to our feedback list.

You can find the source code of the project here: https://github.com/pankod/refine/tree/master/examples/blog/refeedback

DEV Community: Salih Özdemir

Top React Component Libraries and Frameworks Every Developer Should Know

Material UI

Features

Ant Design

Features

Chakra UI

Features

Mantine

Features

Storybook

Features

Refine

Features

Build internal tools using Low-Code with Refine, React-based framework

What is Refine?

Why you should use Refine?

Features of Refine

How does Refine work?

Communicate with the API

Out-of-the-box data providers

Add routing to the application

Out-of-the-box router providers

Create pages via resources

Authentication

Out-of-the-box router providers

Authorization

Out-of-the-box access control providers

Internationalization

Real-time support

Out-of-the-box access control providers

Other features of Refine

notificationProvider

mutationMode

syncWithLocation

Conclusion

Create a feedback admin panel in 15 minutes with refine and Strapi

Creating api with Strapi

Creating panel with refine

Create pages via `resources`

`notificationProvider`

`mutationMode`

`syncWithLocation`

Creating api with `Strapi`

Creating panel with `refine`