React Supacons Mantine

React Supacons Mantine is a React component library that integrates with the Supacons Core Icon Library, providing an icon selector component built with Mantine UI (tested on v6).

Installation

To install the library, use the following command:

  npx react-supacons-mantine -h # To see the help message
  npx react-supacons-mantine add -h # To see the help message for the add command
  npx react-supacons-mantine add [component] # To add a specific component to your project

Available Components

| Component | Type | Command | Description | |---------------------|-----------|--------------------------------------------------|------------------------------------------------------------------------------------------------------------------------| | PopoverSearchIcon | component | npx react-supacons-mantine add PopoverSearchIcon | The PopoverSearchIcon component is a React component that provides a searchable popover interface for selecting icons. |

Usage

To use the PopoverSearchIcon component, import it into your React application:

import React from 'react';
import { MantineProvider } from '@mantine/core';
import PopoverSearchIcon from './components/PopoverSearchIcon';

const App = () => {
  const handleIconSelect = (iconName: string) => {
    console.log(`Selected icon: ${iconName}`);
  };

  return (
    <MantineProvider>
      <PopoverSearchIcon onSelect={handleIconSelect} />
    </MantineProvider>
  );
};

export default App;

Example with Config

To use the PopoverSearchIcon component with a configuration object:

import React, { useState } from 'react';
import { MantineProvider } from '@mantine/core';
import PopoverSearchIcon, { PopoverSearchIconConfig } from './components/PopoverSearchIcon';

const App = () => {
    const [isDarkMode, setIsDarkMode] = useState(false);

    const handleIconSelect = (iconName: string) => {
        console.log(`Selected icon: ${iconName}`);
    };

    const config: PopoverSearchIconConfig = {
        resultsPerPage: 52,
        availableStyles: ["solid", "sharp"],
        contentColor: isDarkMode ? "#fff" : "#000",
        contentSize: 18,
        searchLabel: "Search icons",
        paginationLabel: "Page %d of %s",
        buttonLabel: "Select Icon",
        buttonIconName: "fa-solid fa-copy",
        buttonIconSize: 20,
        buttonIconColor: isDarkMode ? "#000" : "#fff",
        buttonColor: isDarkMode ? "#fff" : "#000",
        showBothIconAndText: true,
        noIconsFoundText: "No icons found",
    };

    return (
        <MantineProvider>
            <PopoverSearchIcon onSelect={handleIconSelect} config={config}/>
        </MantineProvider>
    );
};

export default App;

Example with and without configuration

| Not Configured | Configured | |--------------------------------------------------------|----------------------------------------------------| | | |

Props

PopoverSearchIcon

| Prop | Type | Description | |------------|----------|-------------------------------------------------------------------------------| | onSelect | function | Callback function that is called when an icon is selected. | | config | object | Configuration object for customizing the component's behavior and appearance. |

config Object

| Property | Type | Description | |-----------------------|-----------|-----------------------------------------------------------------------------------------------------------------------------| | resultsPerPage | number | Number of icons to display per page. | | availableStyles | string[] | Array of available icon styles. | | contentColor | string | Color of the icons. | | contentSize | number | Size of the icons. | | buttonNode | ReactNode | Custom React node to replace the default button. Allows for complete customization of the button's appearance and behavior. | | buttonLabel | string | Label for the button that opens the popover. | | buttonIconName | string | Name of the icon to display on the button. | | buttonIconSize | number | Size of the icon on the button. | | buttonIconColor | string | Color of the icon on the button. | | buttonColor | string | Background color of the button. | | showBothIconAndText | boolean | Whether to show both icon and text on the button. | | noIconsFoundText | string | Text to display when no icons are found. | | paginationText | string | Text to display for pagination, use %d for current page and %s for total pages. |

Development

To build and test the library locally, use the following commands:

  npm run test # Run tests

License

This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License. See the LICENSE file for details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

Author

• @RawkFX

Repository

GitHub Repository

Bugs

For bug reports, please visit the issues page.

Keywords

• React.Js 18
• Mantine v6
• Supacons Core