Nextail Providers

Nextail Provides is a collection of react hooks and context providers. More to come.

Installation

Nextail Providers is available as an npm package.

// with pnpm
pnpm install @nextail/providers

// with npm
npm install @nextail/providers

// with yarn
yarn add @nextail/providers

Usage

Theme Provider

Here is the app.tsx file of a Next.js project.

import '../styles/globals.css';

import ThemeProvider from '@nextail/providers/ThemeProvider';
import type { AppProps } from 'next/app';
import React from 'react';

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

export default MyApp;

Example to use the theme context in a Next.Js page.

import type { NextPage } from 'next';
import React from 'react';

import Button from '@nextail/core/Button';
import { useThemeContext } from '@nextail/providers/ThemeProvider';

const Home: NextPage = () => {
  const { theme, toggleTheme } = useThemeContext();

  return (
    <div className='w-full h-screen bg-white dark:bg-slate-300'>
      <Button onClick={() => toggleTheme()}>Toggle Theme</Button>
      <h1 className='text-4xl text-black dark:text-slate-200'>{theme}</h1>
    </div>
    );
};

export default Home;

Layout Provider

Here is the app.tsx file of a Next.js project.

import '../styles/globals.css';

import LayoutProvider from '@nextail/providers/LayoutProvider';
import type { AppProps } from 'next/app';
import React from 'react';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <LayoutProvider>
      <Component {...pageProps} />
    </LayoutProvider>
  );
}

export default MyApp;

Example to use the theme context in a Next.Js page.

import type { NextPage } from 'next';
import React from 'react';

import { SidebarV1 } from '@nextail/core/Sidebar';
import Button from '@nextail/core/Button';
import { useLayoutContext } from '@nextail/providers/LayoutProvider';

const Home: NextPage = () => {
  const { sidebarOpen, setSidebarOpen } = useLayoutContext();

  return (
    <>
      <div className='w-full h-screen bg-white dark:bg-slate-300'>
        <Button onClick={() => setSidebarOpen(!sidebar)}>Toggle Sidebar</Button>
        
      </div>
      <div className={`${sidebarOpen ? 'absolute top-0 left-0 ' : 'hidden'}`}>
          <SidebarV1
            data={{
              brand: (
                <div className="text-3xl font-bold uppercase text-emerald-500">
                  Nextail
                </div>
              ),
              bottom: <Button onClick={() => setSidebarOpen(!sidebar)}>Toggle Sidebar</Button>
            }}
            bottom: 
          />
        </div>
      </>
    );
};

export default Home;