Next Strapi Factory

A reusable component library for Next.js and Strapi projects, built with TypeScript and TailwindCSS.

Installation

To install the next-strapi-factory component library, run the following command:

npm i @typoconsult/next-strapi-factory

Peer Dependencies

This component library has the following peer dependencies:

• react: ^18.0.0
• react-dom: ^18.0.0
• next: ^13.0.0

Make sure your project has these dependencies installed.

Setup

TailwindCSS

The library is built with TailwindCSS and relies on a primary color. The primary color needs to be configured in the tailwind.config.js file of your project, like this:

module.exports = {
    // ...
    theme: {
        extend: {
            colors: {
                primary: {
                    100: '#ffb14d',
                    200: '#ff8700',
                    300: '#de7805'
                }
            }
        }
    },
    // ...
};

• Primary 100: A lighter shade of the primary color. This variant can be used for lighter backgrounds, hover effects, and other cases where a less intense primary color is desired.
• Primary 200: The default primary color. This is the main color used for buttons, links, and other interactive elements.
• Primary 300: A darker shade of the primary color. This variant can be used for active states, focus outlines, and other cases where a more intense primary color is needed.

FontAwesome

The library uses FontAwesome Pro to provide a wide range of high-quality icons for your components. To use FontAwesome Pro, you need to have a valid FontAwesome Pro token.

By default, the various components are using the light icon variant, but buttons and links also accept all other variants, they just need to be installed manually in your project, like so:

npm i @fortawesome/pro-regular-svg-icons

Usage

Components

To use a component from the next-strapi-factory library, simply import it into your project:

import { FC } from 'react';
import { Button } from '@typoconsult/next-strapi-factory';

const MyApp: FC = () => {
    return (
        <div>
            <Button text="Click me!" onClick={() => alert('Button clicked!')}/>
        </div>
    );
};

export default MyApp;

For a full overview of the available components including how to use it. This project also comes with a Storybook, that can be started by running:

npm run storybook

For the above to work, you need to clone and set up the project locally.

Hooks

The library also includes some useful hooks. Read the docs for more:

• useBreakpoint
• useIsMobile

Contributing

If you'd like to contribute to the development of next-strapi-factory, please follow these steps:

1. Fork the repository on GitHub.
2. Clone your fork to your local machine.
3. Install the dependencies with npm install.
4. Create a new branch for your feature or bugfix.
5. Make your changes and commit them to your branch.
6. Push your branch to your fork on GitHub.
7. Create a pull request from your branch to the main repository.