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

Prop	Type	Description
inputLabel	string	The label for the input field.
isInvalid	boolean	Indicates whether the input is in an invalid state.
inputErrorMessage	string	Error message to be displayed when isInvalid is true.
onChange	(e?: FormEvent<HTMLInputElement>) => void	Event handler for the input change event.
onBlur	(e?: FocusEvent<HTMLInputElement>) => void	Event handler for the input blur event.
inputValue	string	The current value of the input.
inputIdentifier	string	A unique identifier for the input.
isRequired	boolean	Indicates whether the input is required.
hasFloatingLabel	boolean	Indicates whether the input has a floating label.
placeholder	string	Placeholder text for the input.
floatingLabelBgColor	string	Background color for the floating label. Default is '#FFFFFF'.
...rest	Various props from Chakra UI's InputProps	Refer to Chakra UI Input documentation for additional props and customization options.

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

Prop	Type	Description
inputLabel	string	The label for the password input.
isRequired	boolean	Indicates if the password input is required.
handleChange	function	The function to handle password input changes.
handleBlur	function	The function to handle password input blur.
inputValue	string	The value of the password input.
inputIdentifier	string	A unique identifier for the password input.
isInvalid	boolean	Indicates if the password input is invalid.
inputErrorMessage	string	The error message to display for an invalid password.
hasFloatingLabel	boolean (optional)	Adds a floating label effect.
placeholder	string (optional)	The placeholder text for the password input.
variant	string (optional)	The Chakra UI variant for the password input.
...rest	Various props from Chakra UI's InputProps	Refer to Chakra UI Input documentation for additional props and customization options.

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

Prop	Type	Description
aria-label	string	ARIA label for accessibility. Automatically handled for the button.
...rest	Various props from Chakra UI's IconButton	Refer to Chakra UI IconButton documentation for additional props and customization options.

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

Name	Type	Description
onClick	(event: MouseEvent<HTMLButtonElement>) => void	Callback function triggered when the button is clicked.
...rest	Various props from Chakra UI's IconButton	Refer to Chakra UI IconButton documentation for additional props and customization options.

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.