chakraui-custom-components v0.1.28

ChakraUI Custom Components

ChakraUI Custom Components is a library created by jpcchaves, a Software Engineer who loves using Chakra UI in his React TypeScript projects. This library includes a set of custom components commonly used in his projects, aiming to simplify development by avoiding code replication across projects.

Installation

To install ChakraUI Custom Components in your project, run the following command:

npm install chakra-ui-custom-components

yarn add chakra-ui-custom-components

Usage

Importing Components

import {
  InputComponent,
   /* other components */,
} from 'chakra-ui-custom-components';

Components

InputComponent

Example Usage

import React from 'react';
import { InputComponent } from 'chakra-ui-custom-components';

const MyForm: React.FC = () => {
  return (
    <InputComponent
      inputLabel="Username"
      isRequired
      handleChange={() => {}}
      handleBlur={() => {}}
      inputValue=""
      inputIdentifier="username"
    />
  );
};

Props

Utility Function: floatingLabelVariant

The floatingLabelVariant function returns custom styles for a floating label variant within the Chakra UI Form component. It takes two parameters:

• floatingLabelBgLight (string): Background color for the label when the overall background is light.
• floatingLabelBgDark (string): Background color for the label when the overall background is dark.

// Import this function to get custom styles for the floating label variant
export const floatingLabelVariant = (
  floatingLabelBgLight: string,
  floatingLabelBgDark: string
) => {
  return {
    components: {
      Form: {
        variants: {
          floating: {
            container: {
              _focusWithin: {
                label: {
                  ...activeLabelStyles,
                },
              },
              'input:not(:placeholder-shown) + label, .chakra-select__wrapper + label, textarea:not(:placeholder-shown) ~ label': {
                ...activeLabelStyles,
              },
              label: {
                top: 0,
                left: 0,
                zIndex: 2,
                position: 'absolute',
                backgroundColor: floatingLabelBgLight,
                pointerEvents: 'none',
                mx: 3,
                px: 1,
                my: 2,
                transformOrigin: 'left top',
                _dark: {
                  backgroundColor: floatingLabelBgDark,
                },
              },
            },
          },
        },
      },
    },
  };
};

Applying the Floating Label Variant

Follow these instructions to seamlessly integrate the custom floating label variant into your Chakra UI theme configuration.

1. Import Dependencies

In your Chakra theme configuration file, start by importing the necessary dependencies:

// In the user's Chakra theme configuration file
import { extendTheme } from '@chakra-ui/react';
import { floatingLabelVariant } from 'chakraui-custom-components';

2.Define Background Colors and pass them to floatingLabelVariant method

Define the background colors for the floating label variant in both light and dark modes:

const floatingLabelBgLight = '#FFFFFF'; // Set your desired light mode background color
const floatingLabelBgDark = '#1B254B'; // Set your desired dark mode background color

const floatingLabelStyle = floatingLabelVariant(
  floatingLabelBgLight,
  floatingLabelBgDark
); // the function returns the custom variant with the custom background colors your selected

3. Use the floatingLabelStyle in your chakra global styles definition

const globalStyles = {
  components: {
    ...floatingLabelStyle,
  },
};

4. Add the global styles in your chakra theme definition

const theme = extendTheme(
  {
    /* you theme extensions here */
  },
  globalStyles
);

5. Add theme in Chakra Provider

<ChakraProvider theme={theme}>/* your app*/</ChakraProvider>

PasswordInput

Example Usage

import React from 'react';
import { PasswordInput } from 'chakra-ui-custom-components';

const MyForm: React.FC = () => {
  return (
    <PasswordInput
      inputLabel="Username"
      isRequired
      handleChange={() => {}}
      handleBlur={() => {}}
      inputValue=""
      inputIdentifier="username"
    />
  );
};

Props

ScrollTop

The ScrollTop component is a React component designed to provide a convenient "scroll to top" button for a web page. When the user scrolls down the page, the button becomes visible, and clicking it smoothly scrolls the page back to the top.

Usage

Import the ScrollTop component into your React application and use it within your desired component or layout.

import { ScrollTop } from 'chakraui-custom-components';

// ... your other imports

const YourComponent = () => {
  // ... your component logic

  return (
    <div>
      {/_ Your component content _/}
      {/_ ... _/}

      {/* ScrollTop component */}
      <ScrollTop />
    </div>
  );
};

export default YourComponent;

Props

Behavior

• The button becomes visible when the user scrolls down the page.
• Clicking the button smoothly scrolls the page back to the top.

Example

import { ArrowUpIcon } from '@chakra-ui/icons';
import { ScrollTop } from 'chakraui-custom-components';

const ExampleComponent = () => {
  return (
    <div>
      {/_ Your component content _/}
      {/_ ... _/}

      {/* ScrollTop component with custom props */}
      <ScrollTop
        colorScheme="teal"
        size="lg"
        // ... other IconButton props
      />
    </div>
  );
};

export default ExampleComponent;

Feel free to customize the ScrollTop component by passing additional props to the IconButton component.

Example

<ScrollTop
  ...rest
  aria-label="Your ARIA label"
/>

FloatButton

The FloatButton component is a customized button component built to create a floating button that can be positioned on the screen.

Usage

Import the FloatButton component and use it within your React application.

import React from 'react';
import { FloatButton } from 'chakraui-custom-components';

const MyComponent = () => {
  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {
    // Handle button click event
    console.log('Button Clicked!', event);
  };

  return (
    <div>
      {/_ Other components _/}

      {/_ Use FloatButton component _/}
      <FloatButton onClick={handleButtonClick} />
    </div>
  );
};

Props

Example

import React from 'react';
import { FloatButton } from 'chakraui-custom-components';

const MyComponent = () => {
  const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {
    // Handle button click event
    console.log('Button Clicked!', event);
  };

  return (
    <div>
      {/_ Other components _/}

      {/_ Use FloatButton component _/}
      <FloatButton
        onClick={handleButtonClick}
        icon={<YourIconComponent />}
        colorScheme="teal"
        // Add other Chakra UI IconButton props as needed
      />
    </div>
  );
};

This example showcases how to use the FloatButton component with additional customization using Chakra UI's IconButton props.

License

This project is licensed under the MIT License - see the LICENSE file for details.