@customd/nextjs-components

A comprehensive React component library built with Material-UI (MUI) and Emotion, designed specifically for Next.js applications.

Installation

npm install @customd/nextjs-components
# or
yarn add @customd/nextjs-components

Peer Dependencies

This library requires the following peer dependencies to be installed in your project:

npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled formik lodash

Or with yarn:

yarn add react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled formik lodash

Usage

Basic Setup

Wrap your application with the ThemeProvider:

import {ThemeProvider} from '@customd/nextjs-components';

function MyApp({Component, pageProps}) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Using Components

import {Button, Input, Typography} from '@customd/nextjs-components';

function MyComponent() {
  return (
    <div>
      <Typography variant="h1">Hello World</Typography>
      <Input placeholder="Enter text..." />
      <Button variant="contained" color="primary">
        Click Me
      </Button>
    </div>
  );
}

Form Components with Formik

The library includes Formik-integrated field components:

import {Formik, Form} from 'formik';
import {InputField, CheckboxField, AutocompleteField} from '@customd/nextjs-components';

function MyForm() {
  return (
    <Formik initialValues={{name: '', email: '', terms: false}} onSubmit={values => console.log(values)}>
      <Form>
        <InputField name="name" label="Name" />
        <InputField name="email" label="Email" type="email" />
        <CheckboxField name="terms" label="I agree to terms" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

Available Components

Form Components

• Input / InputField - Text input with Formik integration
• Textarea / TextareaField - Multi-line text input
• Checkbox / CheckboxField - Checkbox input
• Switch / SwitchField - Toggle switch
• Autocomplete / AutocompleteField - Searchable select input

Layout Components

• Box - Flexible container component
• BackgroundLayout - Layout with background styling
• Footer - Pre-styled footer component

UI Components

• Button - Customisable button component
• Typography - Text component with theme variants
• Loading - Loading spinner component

Authentication Components

• LoginForm - Ready-to-use login form
• RegisterForm - User registration form
• ForgotPasswordForm - Password recovery form

Advanced Components

• Address - Address input components
• ThemeProvider - Theme context provider with dark mode support

Theming

The library includes a built-in theme system with light and dark mode support:

import {ThemeProvider, usePreferredColorScheme} from '@customd/nextjs-components';

function App() {
  const preferredMode = usePreferredColorScheme();

  return <ThemeProvider mode={preferredMode}>{/* Your app */}</ThemeProvider>;
}

Custom Hooks

The library exports several useful hooks:

• useDebounce - Debounce values
• useDebouncedCallback - Debounce callbacks
• useDelay - Delay execution
• useInterval - Interval timer
• useTimeout - Timeout timer
• useNotification - Toast notifications
• useOnScreen - Intersection observer
• useOutsideClickCallback - Detect outside clicks
• usePreferredColorScheme - Detect user's preferred colour scheme

TypeScript

This library is written in JavaScript but includes PropTypes for runtime type checking. TypeScript definitions may be added in future versions.

Browser Support

• Edge 17+
• Firefox 60+
• Chrome 67+
• Safari 11.1+

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.

Licence

ISC

Links

• npm Package
• Repository