Groovinads-ui NPM

Included components

The library includes the following components:

Buttons:
- Button: For user actions.
Dropdowns:
- DropdownComponent: For dropdown menus.
- DropdownDatePicker: For filter dropdowns.
- DropdownFilter: For filter dropdowns.
- DropdownMultiSelect: For dynamically managing and displaying keywords.
- DropdownSimpleDatePicker: For filter dropdowns.
Inputs:
- Checkbox: For multiple option selections.
- Input: For user data entry.
- InputChip: For dynamically managing and displaying keywords.
- InputEmail: For managing email lists, including adding, displaying, and deleting email addresses.
- Radio: For exclusive selections.
- Switch: For toggle states.
- Textarea: For multiline text input.
Labels:
- Alert: For displaying alerts.
- Icon: For displaying icons.
- LoginSource: For show icons of login sources.
- PillComponent: For displaying information.
- Spinner: For loading animations.
- StatusIcon: For displaying status icons.
Navigation:
- Navbar: For top navigation bars.
- Sidebar: For side navigation bars.
- Stepper: For step-by-step navigation.
- Tabnav: For tab navigation.
Toast:
- ToastComponent: For displaying notifications.
- ToastProgress: For displaying progress notifications.

Requirements

The component styles must be included from: https://ui.groovinads.com/styles.min.css.
npm (v18 or higher).
Font Awesome icons must be included in the project.

⚠️ Important: Use of additional CSS libraries

When utilizing external libraries that require additional CSS styles, it is important to ensure that these styles are not added directly to individual components. Instead, they should be included in the index.html file of your project. This ensures that all styles are loaded correctly and in the desired order. Specifically, make sure that the CSS file https://ui.groovinads.com/styles.min.css is the last one to be loaded to avoid style conflicts and ensure that the default Groovinads styles have the proper priority.

<!-- Example of how to include additional CSS styles in index.html -->
<head>
	<!-- Other CSS files -->
	<link rel="stylesheet" href="https://example.com/external-library.css" />
	<!-- Groovinads CSS file, ensure it is the last to be loaded -->
	<link rel="stylesheet" href="https://ui.groovinads.com/styles.min.css" />
</head>

Installation

To use the Groovinads UI library in your project, run the following command:

yarn add groovinads-ui

Usage

Here are examples of how to use the components included in the Groovinads UI library:

Buttons

Button

import React from 'react';
import { Button } from 'groovinads-ui';

<Button
	variant={'outline'}
	size={'xs'}
	oonClick={() => {
		console.log('Button clicked');
	}}
	icon={'plus'}
	iconPosition={'end'}
	style={'warning'}
	className={'mb-5'}
	processing={true}
>
	Let's groove!
</Button>;

Property	Type	Required	Options	Default	Description
`children`	Node	No	n/a	n/a	If true, children will be displayed alongside the spinner with '...' added to indicate the processing status in the label. If false, only the spinner will be shown. It can include text, icons, or other components.
`className`	String	No	n/a	n/a	Additional CSS class names that can be applied to the button.
`icon`	String	No	n/a	n/a	Specifies the name of the icon to be displayed inside the button.
`iconPosition`	String	No	`start` `end`	`start`	Position of the icon relative to the text inside the button. It's optional.
`onClick`	Function	No	n/a	n/a	Function to be executed when the button is clicked.
`processing`	Boolean	No	`true` `false`	`false`	If true, displays a loading animation (...) with a spinner. If false, it will not be displayed.
`size`	String	No	`xs` `md` `lg`	`md`	Defines the size of the button. It's optional.
`style`	String	No	`default` `success` `danger` `warning` `link`	`default`	Specifies the style variant of the button, which can change its color and visual appearance. It's optional.
`variant`	String	No	`primary` `secondary` `terciary` `outline`	`primary`	Defines the visual style of the button. It's optional.
`disabled`	Boolean	No	`true` `false`	`false`	If true, disables the button. If false, the button is enabled.

Dropdowns

DropdownComponent

import React, { useState } from 'react';
import { DropdownComponent, Button, Icon } from 'groovinads-ui';
import { DropdownMenu, DropdownItem } from 'react-bootstrap';

const DropdownComponentExample = () => {
	const [show, setShow] = useState(false);

	const handleToggle = () => {
		setShow((prevShow) => !prevShow);
	};

	return (
		<DropdownComponent
			show={show}
			setShow={setShow}
			onToggle={handleToggle}
			align='start'
			fullWidth={true}
		>
			<Button
				variant='outline'
				icon='plus'
				className='dropdown-toggle'
				onClick={handleToggle}
			>
				<span>Add filter</span>
				<Icon iconName='chevron-down' className='ms-2' />
			</Button>

			<DropdownMenu>
				<DropdownItem onClick={() => console.log('Item 1 clicked')}>
					Item 1
				</DropdownItem>
			</DropdownMenu>
		</DropdownComponent>
	);
};

export default DropdownComponentExample;

Dropdown width submenu

<DropdownComponent autoClose='outside' show={show} setShow={setShow}>
	<Dropdown.Toggle onClick={() => handleToggle()}>Toggle</Dropdown.Toggle>
	<Dropdown.Menu>
		<Dropdown.Item>
			<DropdownComponent autoClose='outside' drop='end'>
				<Dropdown.Toggle as='div'>Submenu</Dropdown.Toggle>
				<Dropdown.Menu>
					<Dropdown.Item>Item 1</Dropdown.Item>
					<Dropdown.Item>Item 2</Dropdown.Item>
					<Dropdown.Item>Item 3</Dropdown.Item>
				</Dropdown.Menu>
			</DropdownComponent>
		</Dropdown.Item>
		<Dropdown.Item>Item 2</Dropdown.Item>
		<Dropdown.Item>Item 3</Dropdown.Item>
	</Dropdown.Menu>
</DropdownComponent>

Property	Type	Required	Options	Default	Description
`align`	String	No	`start` `end`	`start`	Determines the alignment of the dropdown menu relative to the toggle. If `start`, the dropdown menu will align with the start of the toggle. If `end`, the dropdown menu will align with the end of the toggle.
`autoClose`	Boolean / String	No	`true` `false` `outside` `inside`	false	Determines when the dropdown should auto-close. If `true` or `inside`, it closes on inside click. If `outside`, it closes on the outside click.
`children`	Node	Yes	n/a	n/a	Child components to be rendered inside the dropdown.
`className`	String	No	n/a	string	Adds a custom CSS class to the component.names.
`drop`	String	No	`up` `down` `start` `end`	n/a	Determines the direction in which the dropdown menu will be displayed.
`fullWidth`	Boolean	No	n/a	n/a	If true, the dropdown menu will span the full width of its container.
`overflow`	Boolean	No	`true` `false`	false	Adjusts the dropdown's position to handle overflow situations.
`show`	Boolean	No	`true` `false`	n/a	Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden.

DropdownDatePicker

import { DropdownDatePicker } from 'groovinads-ui';
import React, { useState } from 'react';

const DropdownDatePickerExample = () => {
	const [show, setShow] = useState(false);
	const [dateFrom, setDateFrom] = useState(null);
	const [dateTo, setDateTo] = useState(null);

	const handleToggle = () => {
		setShow((prevShow) => !prevShow);
	};

	const handleRemoveFilter = () => {
		setDateFrom(null);
		setDateTo(null);
	};

	return (
		<div>
			<DropdownFilter
				variant='filter'
				show={show}
				setShow={setShow}
				onToggle={handleToggle}
				inputLabel='Select Period'
				locked={false}
				overflow={true}
				onRemoveFilter={handleRemoveFilter}
				dateFrom={dateFrom}
				setDateFrom={setDateFrom}
				dateTo={dateTo}
				setDateTo={setDateTo}
				minDate={new Date('2025-01-01')}
				maxDate={new Date('2025-01-31')}
			/>
		</div>
	);
};

export default DropdownDatePickerExample;

Property	Type	Required	Option	Default	Description
`className`	String	No	n/a	n/a	Adds a custom CSS class to the component.
`dateFrom`	String	No	n/a	`null`	Start date.
`dateTo`	String	No	n/a	`null`	End date.
`inputLabel`	String	No	n/a	`period`	Label to display on the dropdown toggle button.
`locked`	Boolean	No	`true` `false`	`false`	Determines if the dropdown is locked. If true, it is not interactive. If false, it is interactive.
`onToggle`	Function	No	n/a	n/a	Function that is called when the dropdown is toggled.
`onRemoveFilter`	Function	No	n/a	n/a	Remove the filter when the remove filter button is clicked.
`overflow`	Boolean	No	`true` `false`	`false`	Adjusts the dropdown's position to handle overflow situations.
`setDateFrom`	Function	No	n/a	n/a	Allows updating the start date of the date range. Function to update the start date of the range to be selected.
`setDateTo`	Function	No	n/a	n/a	Allows you to update the end date of the selection range.
`setShow`	Function	No	n/a	n/a	Function to update the visibility state of the dropdown.
`show`	Boolean	No	`true` `false`	`false`	Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden.
`variant`	String	No	`input` `filter`	`input`	Determines the type of dropdown. If 'input', it will be displayed as a button. If 'filter', it will be displayed as a filter dropdown.
`minDate`	Object	No	n/a	n/a	Min date filter.
`maxDate`	Object	No	n/a	n/a	Max date filter.

DropdownFilter

import React from 'react';
import { DropdownFilter } from 'groovinads-ui';

<DropdownFilter
	title='Filter'
	valuesSelected={['Value1', 'Value2']}
	setValuesSelected={(newValues) => console.log(newValues)}
	values={['Value1', 'Value2', 'Value3']}
	menuType='simple'
	locked={false}
	onRemoveFilter={() => console.log('Filter removed')}
	show={true}
	onToggle={(isOpen) => console.log(isOpen)}
	overflow={false}
	className='custom-class'
/>;

Property	Type	Required	Options	Default	Description
`className`	String	No	n/a	n/a	Additional CSS class names.
`locked`	Boolean	No	`true` `false`	`false`	If true, the filter cannot be removed.
`menuType`	String	No	`simple` `selection`	`simple`	Type of dropdown menu.
`onRemoveFilter`	Function	No	n/a	n/a	Function to handle filter removal.
`onToggle`	Function	No	n/a	n/a	Function to handle toggle state changes.
`overflow`	Boolean	No	`true` `false`	`false`	Whether to enable overflow strategy for the dropdown.
`setValuesSelected`	Function	No	n/a	n/a	Function to set the selected values.
`show`	Boolean	No	`true` `false`	n/a	Controls the visibility of the dropdown.
`title`	String	No	n/a	n/a	Title of the dropdown filter.
`values`	Array	No	n/a		Available values for selection.
`valuesSelected`	Array	No	n/a		Available values for selection.

DropdownMultiSelect

import React, { useState } from 'react';
import { DropdownMultiSelect } from 'groovinads-ui';

const MultiSelectComponent = () => {
	const [selectedValues, setSelectedValues] = useState([]);
	const [show, setShow] = useState(false);

	const handleToggle = () => setShow((prevShow) => !prevShow);

	const [filters] = useState([
		{ id: 1, name: 'Filter 1', showStatus: '1' },
		{ id: 2, name: 'Filter 2', showStatus: '0' },
		{ id: 3, name: 'Filter 3', showStatus: '1' },
		{ id: 4, name: 'Filter 4', showStatus: '0' },
		{ id: 5, name: 'Filter 5', showStatus: '0' },
		{ id: 6, name: 'Filter 6', showStatus: '2' },
	]);

	return (
		<DropdownMultiSelect
			valuesSelected={selectedValues}
			setValuesSelected={setSelectedValues}
			values={filters}
			show={show}
			onToggle={handleToggle}
			object={true}
			nameKey='name'
			idKey='id'
			inputLabel='Filters'
			focus={show}
			buttonVariant='primary'
			nowrap={true}
			errorRequired={errorRequired}
			setErrorRequiered={setErrorRequired}
			validate={true}
			requiredText='customizable text'
		/>
	);
};

export default MultiSelectComponent;

Property	Type	Required	Options	Default	Description
`autoClose`	Boolean / String	No	`true` `false` `inside` `outside`	`false`	Controls when the dropdown menu closes. If `false`, the menu does not close on click. If `true`, it closes when clicking an item in the list or outside the menu. If inside, it closes when clicking an item in the list but not when clicking outside the menu. If outside, it closes when clicking outside the menu but not when clicking an item in the list.
`buttonVariant`	String	No	`input`	`primary` `secondary` `terciary` `outline`	Defines the visual style of the button, used to toggle the dropdown menu.
`className`	String	No	n/a	n/a	Adds custom CSS properties to style the component.
`drop`	String	No	`up` `down`	n/a	Specifies the direction in which the dropdown should open.
`focus`	Boolean	No	`true` `false`	`false`	If true, the search input will be focused when the dropdown is shown.
`idInPill`	Boolean	No	`true` `false`	`false`	If true, ID will be shown in the pill component.
`idKey`	String	No	n/a	n/a	Defines the key used in the object to find the item’s ID, allowing for the identification and handling of selected items and other operations within the component.
`inputLabel`	String	No	n/a	''	Allows customizing the label for the input field within the dropdown menu.
`nameKey`	String	No	n/a	n/a	Defines the key that will be used in the object to display the item's name.
`nowrap`	Boolean	No	`true` `false`	`false`	If `true`, the content will be displayed on a single line. If it exceeds the width, a scroll will be shown. If `false`, it will fit the width of the button. If it exceeds, the content will be displayed on multiple lines.
`object`	Boolean	No	`true` `false`	`false`	`object` determines whether the values in values are objects (with properties `nameKey` and `idKey`) or simple values (strings or numbers).
`onToggle`	Function	No	n/a	n/a	Contains the handleToggle function which handles changing the show state between true and false, toggling the visibility of the menu.
`overflow`	Boolean	No	`true` `false`	`false`	Whether to enable overflow strategy for the dropdown.
`searchLabel`	String	No	n/a	'Search'	Label for the search input field.
`show`	Boolean	No	`true` `false`	n/a	Controls the visibility of the dropdown.
`showStatus`	String	No	n/a	String	Filter items by status if applicable.
`values`	Array	No	n/a		Available values for selection.
`valuesSelected`	Array / Object	No	n/a		Represents the state of the values that are currently selected.
`hasId`	Boolean	No	`true` `false`	`true`	Controls wether the hashtag and id shows or not in the dropdown options
`validate`	Boolean	No	`true` `false`	`false`	Enables validation (error). If true, it checks whether items have been selected from the dropdown. If false, no validation is performed.
`requiredText`	String	No	n/a	`'requiered'`	Text displayed when the field is required and triggers an error (`validate`). It can be customized.
`errorRequired`	Boolean	No	`false` `true`	`false`	Determines when the error message is displayed. Defaults to false.
`setErrorRequired`	Function	No	n/a	n/a	Allows users to control when the error is displayed and update its state (`errorRequired`).

DropdownSimpleDatePicker

import { DropdownDatePicker } from 'groovinads-ui';
import React, { useState } from 'react';

const DropdownSimpleDatePickerExample = () => {
	const [show, setShow] = useState(false);

	const [date, setDate] = useState('');

	const clearStartDate = () => {
		// Resets the date and updates the state as needed. Adjust as required.
		setDate(null);
		setShowDateDropdown(false);
		closeDateDropdown();
		markSelectedPlacements();
		setKey((prevKey) => prevKey + 1);
	};


	return (
		<>
			<button onClick={() => setShow(!show)}>Toggle</button>
			<div className='col-2'>
				<DropdownSimpleDatePicker
					{...args}
					date={date}
					setDate={setDate}
					handleClear={ExampleClearDate}
					minDate={new Date('2025-01-01')}
					maxDate={new Date('2025-01-31')}
				/>
			</div>
		</button>
	);
};

export default DropdownSimpleDatePickerExample;

Property	Type	Required	Option	Default	Description
`className`	String	No	n/a	n/a	Adds a custom CSS class to the component.
`show`	Boolean	No	`true` `false`	`false`	Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden.
`setShow`	Function	No	n/a	n/a	Function to update the visibility state of the dropdown.
`onToggle`	Function	No	n/a	n/a	Function that is called when the dropdown is toggled.
`inputLabel`	String	No	n/a	`period`	Label to display on the dropdown toggle button.
`overflow`	Boolean	No	`true` `false`	`false`	Adjusts the dropdown's position to handle overflow situations.
`date`	String	No	n/a	`null`	Selected date.
`setDate`	Function	No	n/a	n/a	Function that updates the start date.
`handleClear`	Function	No	n/a	n/a	Allows providing, as needed, a function to reset the date, update the state as necessary, etc. If none is provided, the date will be cleared by default.
`minDate`	Object	No	n/a	n/a	Min date filter.
`maxDate`	Object	No	n/a	n/a	Max date filter.

Checkbox

import React, { useState } from 'react';
import { Checkbox } from 'groovinads-ui';

const CheckboxComponent = () => {
	const [accepted, setAccepted] = useState(false);

	return (
		<Checkbox
			className=''
			id='acceptTerms'
			name='terms'
			status={accepted}
			setStatus={setAccepted}
		>
			{children}
		</Checkbox>
	);
};

export default CheckboxComponent;

Property	Type	Required	Options	Default	Description
`children`	Node	No	n/a	n/a	Content that is rendered as the label for the checkbox.
`className`	String	No	n/a	n/a	Additional CSS class names that can be applied to the checkbox.
`id`	String	No	n/a	n/a	The unique identifier for the checkbox. It's required for associating the label and checkbox.
`name`	String	No	n/a	n/a	The `name` attribute of the checkbox. Used to identify the form data after it's submitted.
`setStatus`	Function	No	n/a	n/a	Function to set the `status` of the checkbox. This is a handler function typically used for state management.
`status`	Boolean	No	`true` `false`	`false`	Indicates whether the checkbox is checked, `true` or unchecked `false`.

Input

import React from 'react';
import { Input } from 'groovinads-ui';

const InputComponent = () => {
	const handleInputChange = () => {
		console.log('Input changed');
	};

	const handleShowError = (showError) => {
		console.log(showError);
	};

	return (
		<div>
			<Input
				className={'mb-5'}
				helpText={'This is a text'}
				label={'Input label'}
				name={'input'}
				onChange={handleInputChange}
				requiredText={'This field is required'}
				showError={false}
				setShowError={handleShowError}
				type={'text'}
				disabled={false}
				icon={'user'}
				prefix={'DD/MM/YYYY'}
				suffix={'GMT'}
				size={'md'}
				value={''}
				autoFocus={false}
				customRef={null}
			/>
		</div>
	);
};

export default InputComponent;

Property	Type	Required	Options	Default	Description
`autoFocus`	Boolean	No	`true` `false`	`false`	If true, automatically focuses the input when the component mounts.
`className`	String	No	n/a	n/a	Additional CSS class names that can be applied to the input.
`disabled`	Boolean	No	`true` `false`	`false`	If true, disables the input field.
`focus`	Boolean	No	`true` `false`	`false`	Controls whether the input field should automatically receive focus when the component is rendered.
`helpText`	String	No	n/a	n/a	Optional text under the input to guide the user or provide additional information.
`icon`	String	No	n/a	n/a	Specifies the name of the icon to be displayed inside the input.
`label`	String	No	n/a	'Label'	Input field that handles different `type` of data based on the assigned type prop. Allows for adding icons, managing error messages, and other functionalities.
`max`	Number	No	n/a	n/a	Specifies the maximum value that the input field can accept.
`maxLength`	Number	No	n/a	n/a	Specifies the maximum number of characters that the input field can accept.
`min`	Number	No	n/a	n/a	Specifies the minimum value that the input field can accept.
`name`	String	No	n/a	n/a	Indicates the name attribute for the input element, which represents the form data after it is submitted.
`onChange`	Function	No	n/a	n/a	Allows the user to update the value of the input field and synchronizes the field's value with the component's internal state.
`prefix`	String	No	n/a	n/a	Text or characters to display at the start of the input, e.g., 'USD' for currency.
`requiredText`	String	No	n/a	n/a	Text displayed when input validation fails, used to indicate an error.
`setShowError`	Function	No	n/a	n/a	Function used to change the state of `showError`.
`size`	String	No	`xs` `md` `lg`	`md`	Sets the size of the input field.
`suffix`	String	No	n/a	n/a	Optional suffix text to display inside the input field.
`showError`	Boolean	No	`true` `false`	`false`	If true, indicates that an error message should be displayed, usually controlled by `setShowError`.
`type`	String	No	`color` `date` `datetime-local` `email` `file` `image` `month` `number` `password` `tel` `text` `time` `url` `week`	`text`	Type of input
`value`	String / Number	No	n/a	n/a	The value of the input.

InputChip

import React, { useState } from 'react';
import { InputChip } from 'groovinads-ui';

const ExampleIputChip = () => (
	const  [ keywordsList, setKeywordsList] = useState(['keyword1', 'keyword2', 'keyword3']);
	const nonRecomendedKeywords = ['keyword4', 'keyword5'];
	<>
		{/* RECEIVES KEYWORDS INITIALLY */}
		<InputChip
			className={'mb-3'}
			placeholder={'Add keywords…'}
			keywordsList={keywordsList}
			setKeywordsList={setKeywordsList}
			nonRecomendedKeywords={nonRecomendedKeywords}
			counter={true}
			maxKeywordLength={10}
			recomendedKeywords={5}
			maxKeywords={15}
			requiredText='You can only add up to 15 keywords.'
		/>

		{/* INITIALIZED EMPTY, WITHOUT KEYWORDS */}
		<InputChip
			placeholder={'Add keywords…'}
			keywordsList={keywordList2}
			setKeywordsList={setKeywordsList2}
			nonRecomendedKeywords={nonRecomendedKeywords}
			maxKeywordLength={10}
			maxKeywords={15}
			requiredText='You can only add up to 15 keywords.'
			counter={true}
		/>
	</>
);

export default ExampleInputChip;

Property	Type	Required	Options	Default	Description
`className`	String	No	n/a	n/a	Additional CSS class names that can be applied to the inputChip.
`placeholder`	String	Yes	n/a	n/a	Displays a suggested or descriptive text inside the input field before the user types.
`keywordsList`	Array	Yes	n/a	n/a	This property expects an array of keywords. You can initialize it as an empty array or with keywords, and it will be updated when new keywords are added or removed from the input field.
`setKeywordsList`	String	Yes	n/a	n/a	Dynamically updates the list of keywords. It is called when a new keyword is added or removed from the list. The updated array will be passed to the `keywordsList` prop.
`counter`	Boolean	No	n/a	false	If true, it will display a progressive and numeric counter of keywords. If false, it will not display it.
`nonRecomendedKeywords`	Number	No	n/a	n/a	This property expects an array of non-recommended keywords. When the user enters a word from this array in the input field, the pill for that keyword will appear in 'danger' color.
`recomendedKeywords`	Number	No	n/a	n/a	Specifies the recommended number of keywords. When the keywords list (`keywordsList`) reaches the recommended number, the counter's status will change to the 'warning' color.
`maxKeywords`	Number	Yes	n/a	n/a	Indicates the maximum number of allowed keywords. When the keywordsList reaches this limit, an error message defined in requiredText will be displayed. Additionally, if the counter is enabled, its status will change to the 'danger' color.
`requiredText`	String	Yes	n/a	n/a	Texto que se mostrará como error cuando la lista de keywords (keywordsList) alcance el límite máximo definido en maxKeywords.

InputEmail

// Example Usage
import React, { useState } from 'react';
import { InputEmail } from '../components/Inputs';

const ExampleInputEmail = () => {
	const [showModal, setShowModal] = useState(true); // Received from the parent component.

	return (
		<InputEmail
			titleList='Added emails'
			label='Email addresses'
			textButton='Add'
			textError='You must enter a valid email address'
			/* The responses from the three APIs expect an array of strings (or an empty array) */
			apiGetEmail='incert/your/endpoint'
			apiPostEmail='incert/your/endpoint'
			showModal={showModal} // showModal indicates the visibility of the parent component of InputEmail.
		/>
	);
};
export default ExampleInputChip;

Property	Type	Required	Options	Default	Description
`apiGetEmail`	Array	Yes	n/a	n/a	Endpoint required to fetch the email list. The response should be an array of strings (or empy array) displayed below the input and `titleList`.
`apiPostEmail`	String	Yes	n/a	n/a	An endpoint is required to add or remove emails from the existing email list.
`label`	String	No	n/a	''	Allows adding custom text as the input label.
`showModal`	Boolean	No	`true` `false`	`true`	If true, the email list received from apiGetEmail will be shown when rendering InputEmail.
`textButton`	String	No	n/a	''	Allows adding custom text to the button for adding emails.
`textError`	String	No	n/a	''	Allows adding custom error text when entering an invalid email address.
`titleList`	String	No	n/a	''	Allows adding a custom text that will be shown as the title of the email list.

Radio

import React from 'react';
import { Radio } from 'groovinads-ui';

<Radio
	className={'m-5'}
	id={'radio'}
	name={'radio'}
	setStatus={(status) => console.log(status)}
	status={true}
>
	Click me
</Radio>;

Property	Type	Required	Options	Default	Description
`className`	String	No	n/a	n/a	Additional CSS class names that can be applied to the radio button.
`id`	String	No	n/a	n/a	The unique identifier for the radio button. It is used for linking the label and the radio button.
`name`	String	No	n/a	n/a	The name attribute of the radio button. Used to group multiple radios into a single group.
`setStatus`	Function	No	n/a	n/a	It is used to update the selection state of the radio button based on user interaction.
`status`	Boolean	No	`true` `false`	`false`	Indicates whether the radio button is selected (true, the radio button appears selected) or not (false, it appears unselected).

Switch

import React from 'react';
import { Switch } from 'groovinads-ui';

<Switch
	className={'mb-5'}
	name={'switch'}
	setStatus={(status) => console.log(status)}
	status={0}
>
	This is a switch
</Switch>;

Property	Type	Required	Options	Default	Description
`className`	String	No	n/a	' '	Additional CSS class names that can be applied to the switch.
`icon`	Boolean	No	`true` `false`	`false`	If `true`, displays an icon (play/pause) inside the switch.
`id`	String	No	n/a	n/a	It will be used as the id of the switch input. If not specified, an ID will be automatically generated based on the text of the children.
`name`	String	No	n/a	n/a	The name attribute of the switch. Used to identify the form data after it's submitted.
`setStatus`	Function	No	n/a	n/a	Function to set the `status` of the switch. This is a handler function typically used for state management.
`status`	Number / Boolean	No	`0` `1`	`0`	Indicates whether the switch is on (`1` / `true`) or off (`0` / `false`).
`switchPosition`	String	No	`start` `end`	`start`	Determines the position of the switch relative to the label.

Textarea

import React from 'react';
import { Textarea } from 'groovinads-ui';

<Textarea
	className={'mt-2'}
	helpText={'This is a help text'}
	label={'label'}
	name={'textarea'}
	requiredText={'This field is required'}
	setShowError={(showError) => console.log(showError)}
/>;

Property	Type	Required	Options	Default	Description
`className`	String	No	n/a	n/a	Additional CSS class names that can be applied to the textarea.
`helpText`	String	No	n/a	n/a	Optional text under the textarea to guide the user or provide additional help information.
`label`	String	No	n/a	'Label'	Text label for the textarea field.
`name`	String	No	n/a	n/a	Attribute of the textarea. Used to identify the form data after it's submitted.
`onChange`	Function	No	n/a	n/a	Function to handle changes to the textarea's value. Typically used to update state.
`requiredText`	String	No	n/a	n/a	Text displayed when textarea validation fails, used to indicate an error.
`setShowError`	Function	No	n/a	n/a	Function to set the visibility of the error message.
`showError`	Boolean	No	`true` `false`	`false`	If true, indicates that an error message should be displayed controlled by `setShowError`.
`size`	String	No	`xs` `md` `lg`	`md`	Sets the size of the textarea field.
`value`	String	No	n/a	n/a	The value of the textarea.

Labels

Alert

import React from 'react';
import { Alert } from 'groovinads-ui';

const ExampleAlert = () => (
	<div>
		<Alert
			icon={true}
			animation={false}
			type='info'
			size='md'
			onClose={null}
			className='mt-4'
		>
			{/* Children content goes here */}
			This is an alert component
		</Alert>

		<Alert type='info' onClose={() => console.log('Alert closed')} />
	</div>
);

export default ExampleAlert;

Property	Type	Required	Options	Default	Description
`animation`	Boolean	No	`true` `false`	`false`	If true, adds animation effects to the alert. If false, does not add any effects.
`children`	Node	Yes	n/a	n/a	Content inside the alert.
`className`	String	No	n/a	n/a	Additional CSS class for the alert.
`icon`	Boolean	No	`true` `false`	`true`	If true, displays an icon in the alert. The icon can vary depending on the alert `type` and settings. If false, no icon is displayed in the alert.
`onClose`	Function	No	n/a	`null`	By default, `onClose` is `null`. You can provide a function for this property, which allows you to perform additional actions when the alert is closed.
`size`	String	No	`xs` `md` `lg` `md`	`info`	Size of the alert.
`type`	String	Yes	`info` `success` `warning` `danger`	`info`	Type of alert to display. Each `type` has a specific associated icon.

Icon

import React from 'react';
import { Icon } from 'groovinads-ui';

<Icon
	style='solid'
	scale={1}
	iconName='location-dot'
	className=''
	animation=''
/>;

Property	Type	Required	Options	Default	Description
`animation`	String	No	`beat` `fade` `beat-fade` `bounce` `flip` `shake` `spin` `spin-reverse`	String	Animation for the icon.
`className`	String	No	n/a	n/a	Additional CSS class for the icon.
`iconName`	String	No	n/a	`user-bounty-hunter`	Name of the icon.
`scale`	Number	No	`0.7`, `1`, `2`, `3`, `4`	`1`	Scale of the icon.
`style`	String	No	`light` `solid` `regular` `thin` `duotone` `sharp`	`solid`	Style of the icon.

LoginSource

import React from 'react';
import { LoginSource } from 'groovinads-ui';

<LoginSource logo={'groovinads'} />;

Property	Type	Required	Options	Default	Description
`logo`	String	No	`groovinads` `google` `microsoft` `linkedin`	`groovinads`	Specifies the logo to be displayed on the login source button.

PillComponent

import React, { useState } from 'react';
import { PillComponent } from 'groovinads-ui';

const PillComponentExample = () => {
	const [showPill, setShowPill] = useState(true);

	const handleClosePill = () => {
		setShowPill(false);
	};

	return (
		<div>
			<PillComponent className='mt-3' color='blue'>
				Blue normal Pill
			</PillComponent>

			<PillComponent
				classNeme='mt-3'
				color='red'
				closeButton={true}
				onClick={handleClosePill}
			>
				Red Pill with Close Button
			</PillComponent>
		</div>
	);
};

export default PillComponentExample;

Property	Type	Required	Options	Default	Description
`children`	Node	No	n/a	n/a	Content to be displayed inside the pill component.
`className`	String	No	n/a	n/a	Additional CSS class names that can be applied to the pill. Defaults to an empty string.
`closeButton`	Boolean	No	`true` `false`	`false`	If true, a close button is displayed on the pill, allowing it to be dismissed. If false, no close button is shown.
`color`	String	No	`blue` `danger` `dark` `green` `light` `midtone` `neutral` `red` `yellow`	`neutral`	Specifies the background color of the pill.
`onClick`	Function	No	n/a	n/a	Handles the click event to close the pill. This property is only relevant if closeButton is set to true.

Spinner

import React from 'react';
import { Spinner } from 'groovinads-ui';

<Spinner scale={1} className='mt-3' />;
<Spinner scale={4} className='m-5' />;

Property	Type	Required	Options	Default	Description
`scale`	Number	No	`0.7` `1` `2` `3` `4` `1`	`1`	Scale (size) of th

css sass groovinads responsive front-end components

date-fns react-datepicker react-responsive

10 months ago

7 months ago

9 months ago

9 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

10 months ago

10 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

11 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago