littlepoolshark / refine

A React-based framework for building internal tools, rapidly.

Home Page | Demo | Blog | Documentation | Roadmap | Examples | Enterprise | Discord

refine is a React-based framework for building internal tools, rapidly. ✨ It ships with Ant Design System and Material UI

_{Created by Pankod}

About

refine offers 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.

Documentation

For more detailed information and usage, refer to the refine documentation.

What is refine?

refine is a React-based framework for building internal tools, rapidly. ✨ It ships with Ant Design System and Material UI, an enterprise-level UI toolkit.

Refine offers 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.

What is a "headless" Framework?

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

• Customization & Extensibility - UI is a completely customizable area and each developer uses different solutions. refine features do not restrict or interfere with your UI structure. refine allows you to design and customize the UI based on your unique use case.

• Separation of Concerns - refine, as a framework, is not responsible for your UI and is independent.

• Maintenance - By removing the API surface to support every UI use case, refine is easy to use and its update/maintain is simple.

Key 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. Built-in support for REST API, GraphQL, NestJs CRUD, Airtable, Strapi, Strapi v4, Strapi GraphQL, Supabase, Hasura, Nhost, Appwrite, Firebase, Directus and Altogic.

📝 Native Typescript Core : You can always opt out for plain JavaScript.

🐜 Powerful UI : Works seamlessly with integrated Ant Design System and Material UI. (It can also be used with any UI Framework)

📝 Boilerplate-free Code : Keeps your codebase clean and readable.

Motivation

Higher-level frontend frameworks can save you a lot of time, but they typically offer you a trade-off between speed and flexibility.

After many years of experience in developing B2B frontend applications and working with popular frameworks, we came up with a new approach to tackle this dilemma. This is how refine was born.

refine is a collection of helper hooks, components and providers. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.

Whereas refine is totally unopinionated about UI and logic, it's strongly opinionated about three parts of your application:

1. API Networking
2. State Management
3. Authentication & Authorization

We believe that these are the most important components of a data-intensive frontend application and should be handled in a robust way by leveraging industry best practices.

refine guarantees you a perfect implementation of these building blocks in your project, so that you can focus on your development.

Architecture

refine makes extensive use of hooks as a default way for interacting with your components. Under the hood, refine relies heavily on React Query for data handling, caching and state management. Access to external sources and API's happen via providers which are basically plug-in type components for extendibility.

Benchmark

After releasing the first internal versions, we had the chance to migrate some of our React projects to refine. In addition to shorter development times and overall performance gains, we've measured significant reduction in project size.

refine makes your codebase significantly smaller, by eliminating redundant code such as reducers, actions and unit tests. Below is a size comparison for an example project:

Quick Start

Run the superplate tool with the following command:

npx superplate-cli -p refine-react tutorial

Follow the CLI wizard to select options and start creating your project.

Once the setup is complete, navigate to the project folder and start your project with:

npm run dev

Your refine application will be accessible at http://localhost:3000.

Replace the contents of App.tsx with the following code:

import { Refine, useMany } from "@pankod/refine-core";
import {
    useTable,
    List,
    Table,
    DateField,
} from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import "@pankod/refine-antd/dist/styles.min.css";

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

export const PostList: React.FC = () => {
    const { tableProps } = useTable<IPost>();

    const categoryIds =
        tableProps?.dataSource?.map((item) => item.category.id) ?? [];

    const { data, isLoading } = useMany<ICategory>({
        resource: "categories",
        ids: categoryIds,
        queryOptions: {
            enabled: categoryIds.length > 0,
        },
    });

    return (
        <List>
            <Table<IPost> {...tableProps} rowKey="id">
                <Table.Column dataIndex="title" title="title" />
                <Table.Column
                    dataIndex={["category", "id"]}
                    title="category"
                    render={(value: number) => {
                        if (isLoading) {
                            return "loading...";
                        }

                        return data?.data.find(
                            (item: ICategory) => item.id === value,
                        )?.title;
                    }}
                />
                <Table.Column
                    dataIndex="createdAt"
                    title="createdAt"
                    render={(value) => <DateField format="LLL" value={value} />}
                />
            </Table>
        </List>
    );
};

export default App;

interface IPost {
    title: string;
    createdAt: string;
    category: { id: number };
}

interface ICategory {
    id: number;
    title: string;
}

Roadmap

You can find refine's Public Roadmap here!

Stargazers

Contribution

If you have a bug to report, do not hesitate to file an issue.

If you are willing to fix an issue or propose a feature; all PRs with clear explanations are welcome and encouraged.

License

Licensed under the MIT License, Copyright © 2021-present Pankod