React + TS + Vite.js + Primereact + tailwind template.

this template uses the following technologies:

• React (UI rendering library)
• Vite.js (Development server)
• Primereact (React UI suite)
• Tailwind CSS (CSS framework)
• Typescript (JavaScript with syntax for types)

It also includes some additional utilities and libraries such as:

• axios (HTTP client)
• @tanstack/react-query (Data fetching library)
• react-router v6 (Client routing library)
• clsx (className builder utility)
• tailwind-merge (Tailwind CSS classes merger)
• dayjs (Time manipulation library)
• formik (React form builder)
• yup (Data validation)
• font-awesome icons v6 (A lot of cool icons)
• vite-plugin-svgr (Vite plugin for svgr to transform SVGs into React components)

It contains some custom utility code such as:

Primereact in unstyled mode can be styled with Tailwind via the Pass Through API at will. You can edit/create themes in the themes folder and import them in providers/UIProvider.tsx. If you want to create your own separated theme, copy and paste the themes/main.ts file, rename it and the object inside then import it in providers/UIProvider as such:

// @/themes/awesome.ts
import { PrimeReactPTOptions } from "primereact/api";

const awesomeTheme: PrimeReactPTOptions = {
    // Put any override style here...
};

export default awesomeTheme;

// @/themes/index.ts
import mainTheme from "./main";
import awesomeTheme from "./awesome";

export default { 
    main: mainTheme,
    awesome: awesomeTheme, // We add our import here
};

// @/providers/UIProvider.tsx
export const UIProvider = (props: UIProviderProps) => {
    
    // ...

    const AppTheme = usePassThrough(
        Tailwind,
        themes.awesome, // We use our new theme here
        {
            mergeProps: true,
            mergeSections: true,
            classNameMergeFunction: twMerge,
        },
    );

    return (
        <PrimeReactProvider 
            value={{ 
                unstyled: true, 
                pt: AppTheme,
            }}
        >
            <Toast ref={_toast}/>
            <ConfirmDialog />
            <UIContext.Provider value={initialValue}>
                {props.children}
            </UIContext.Provider>
        </PrimeReactProvider>
    )
}

More info about Primereact theming with Tailwind here.

A React query client has been pre-configured so that you can code right away. However, you can always change the values to suit you.

By default, the following values are set:

By passing a meta object in your queries hooks with an error or success message, you can display a Primereact toast automaticaly.

const useMyQuery = () => {
    return useQuery({
        queryKey: ["my-awesome-query"],
        queryFn: fetchMyAwesomeData,
        meta: {
            success: {
                detail: "Your awesome data has been fetched with success!",
            },
            error: {
                detail: "It seems that your awesome data has been lost...",
            }
        }
    })
}

As mentioned above, it is possible to handle toasts via queries settlement. But you can also display some from anywhere in your code with the toast util as such:

import { toast } from "@/utils/toast";

toast.show({ detail: "Is that a toast???" });

It follows the same API as the Primereact toasts with extra functions.

In order to avoid writing boring and not very readable ../../../ when importing your local modules, @/ can be used as an alias to the src/ folder.

// Switch from this
import { myAwesomeFunction } from "../../../../utils/awesome";

// ...to that!
import { myAwesomeFunction } from "@/utils/awesome";

With this template, you no longer need to create manually components for your favorites SVGs icons or images. Just import them in your code as such:

import MyAwesomeSVGIcon from "@/path/to/svg/awesomeIcon.svg?react";

const SomeComponent = () => {
    return <>
        <MyAwesomeSvgIcon />
    </>;
}

For more information about svgr configuration, see their docs.

Use it as a Github template.

Clone this repository with degit:

degit teaflex/banana-template my-project

Go to your project folder and install the dependencies with your favorite package manager:

cd my-project
pnpm i

Then you should be good to go!

Idk it sounds funny.