1.2.69 • Published 5 months ago

groovinads-ui v1.2.69

Weekly downloads
-
License
MIT
Repository
bitbucket
Last release
5 months ago

Included components

The library includes the following components:

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>;
PropertyTypeRequiredOptionsDefaultDescription
childrenNodeNon/an/aIf 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.
classNameStringNon/an/aAdditional CSS class names that can be applied to the button.
iconStringNon/an/aSpecifies the name of the icon to be displayed inside the button.
iconPositionStringNostart endstartPosition of the icon relative to the text inside the button. It's optional.
onClickFunctionNon/an/aFunction to be executed when the button is clicked.
processingBooleanNotrue falsefalseIf true, displays a loading animation (...) with a spinner. If false, it will not be displayed.
sizeStringNoxs md lgmdDefines the size of the button. It's optional.
styleStringNodefault success danger warning linkdefaultSpecifies the style variant of the button, which can change its color and visual appearance. It's optional.
variantStringNoprimary secondary terciary outlineprimaryDefines the visual style of the button. It's optional.
disabledBooleanNotrue falsefalseIf 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>
PropertyTypeRequiredOptionsDefaultDescription
alignStringNostart endstartDetermines 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.
autoCloseBoolean / StringNotrue false outside insidefalseDetermines when the dropdown should auto-close. If true or inside, it closes on inside click. If outside, it closes on the outside click.
childrenNodeYesn/an/aChild components to be rendered inside the dropdown.
classNameStringNon/astringAdds a custom CSS class to the component.names.
dropStringNoup down start endn/aDetermines the direction in which the dropdown menu will be displayed.
fullWidthBooleanNon/an/aIf true, the dropdown menu will span the full width of its container.
overflowBooleanNotrue falsefalseAdjusts the dropdown's position to handle overflow situations.
showBooleanNotrue falsen/aControls 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;
PropertyTypeRequiredOptionDefaultDescription
classNameStringNon/an/aAdds a custom CSS class to the component.
dateFromStringNon/anullStart date.
dateToStringNon/anullEnd date.
inputLabelStringNon/aperiodLabel to display on the dropdown toggle button.
lockedBooleanNotrue falsefalseDetermines if the dropdown is locked. If true, it is not interactive. If false, it is interactive.
onToggleFunctionNon/an/aFunction that is called when the dropdown is toggled.
onRemoveFilterFunctionNon/an/aRemove the filter when the remove filter button is clicked.
overflowBooleanNotrue falsefalseAdjusts the dropdown's position to handle overflow situations.
setDateFromFunctionNon/an/aAllows updating the start date of the date range. Function to update the start date of the range to be selected.
setDateToFunctionNon/an/aAllows you to update the end date of the selection range.
setShowFunctionNon/an/aFunction to update the visibility state of the dropdown.
showBooleanNotrue falsefalseControls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden.
variantStringNoinput filterinputDetermines the type of dropdown. If 'input', it will be displayed as a button. If 'filter', it will be displayed as a filter dropdown.
minDateObjectNon/an/aMin date filter.
maxDateObjectNon/an/aMax 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'
/>;
PropertyTypeRequiredOptionsDefaultDescription
classNameStringNon/an/aAdditional CSS class names.
lockedBooleanNotrue falsefalseIf true, the filter cannot be removed.
menuTypeStringNosimple selectionsimpleType of dropdown menu.
onRemoveFilterFunctionNon/an/aFunction to handle filter removal.
onToggleFunctionNon/an/aFunction to handle toggle state changes.
overflowBooleanNotrue falsefalseWhether to enable overflow strategy for the dropdown.
setValuesSelectedFunctionNon/an/aFunction to set the selected values.
showBooleanNotrue falsen/aControls the visibility of the dropdown.
titleStringNon/an/aTitle of the dropdown filter.
valuesArrayNon/a Available values for selection.
valuesSelectedArrayNon/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;
PropertyTypeRequiredOptionsDefaultDescription
autoCloseBoolean / StringNotrue false inside outsidefalseControls 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.
buttonVariantStringNoinputprimary secondary terciary outlineDefines the visual style of the button, used to toggle the dropdown menu.
classNameStringNon/an/aAdds custom CSS properties to style the component.
dropStringNoup downn/aSpecifies the direction in which the dropdown should open.
focusBooleanNotrue falsefalseIf true, the search input will be focused when the dropdown is shown.
idInPillBooleanNotrue falsefalseIf true, ID will be shown in the pill component.
idKeyStringNon/an/aDefines 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.
inputLabelStringNon/a''Allows customizing the label for the input field within the dropdown menu.
nameKeyStringNon/an/aDefines the key that will be used in the object to display the item's name.
nowrapBooleanNotrue falsefalseIf 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.
objectBooleanNotrue falsefalseobject determines whether the values in values are objects (with properties nameKey and idKey) or simple values (strings or numbers).
onToggleFunctionNon/an/aContains the handleToggle function which handles changing the show state between true and false, toggling the visibility of the menu.
overflowBooleanNotrue falsefalseWhether to enable overflow strategy for the dropdown.
searchLabelStringNon/a'Search'Label for the search input field.
showBooleanNotrue falsen/aControls the visibility of the dropdown.
showStatusStringNon/aStringFilter items by status if applicable.
valuesArrayNon/a Available values for selection.
valuesSelectedArray / ObjectNon/a Represents the state of the values that are currently selected.
hasIdBooleanNotrue falsetrueControls wether the hashtag and id shows or not in the dropdown options
validateBooleanNotrue falsefalseEnables validation (error). If true, it checks whether items have been selected from the dropdown. If false, no validation is performed.
requiredTextStringNon/a'requiered'Text displayed when the field is required and triggers an error (validate). It can be customized.
errorRequiredBooleanNofalse truefalseDetermines when the error message is displayed. Defaults to false.
setErrorRequiredFunctionNon/an/aAllows 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;
PropertyTypeRequiredOptionDefaultDescription
classNameStringNon/an/aAdds a custom CSS class to the component.
showBooleanNotrue falsefalseControls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden.
setShowFunctionNon/an/aFunction to update the visibility state of the dropdown.
onToggleFunctionNon/an/aFunction that is called when the dropdown is toggled.
inputLabelStringNon/aperiodLabel to display on the dropdown toggle button.
overflowBooleanNotrue falsefalseAdjusts the dropdown's position to handle overflow situations.
dateStringNon/anullSelected date.
setDateFunctionNon/an/aFunction that updates the start date.
handleClearFunctionNon/an/aAllows 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.
minDateObjectNon/an/aMin date filter.
maxDateObjectNon/an/aMax 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;
PropertyTypeRequiredOptionsDefaultDescription
childrenNodeNon/an/aContent that is rendered as the label for the checkbox.
classNameStringNon/an/aAdditional CSS class names that can be applied to the checkbox.
idStringNon/an/aThe unique identifier for the checkbox. It's required for associating the label and checkbox.
nameStringNon/an/aThe name attribute of the checkbox. Used to identify the form data after it's submitted.
setStatusFunctionNon/an/aFunction to set the status of the checkbox. This is a handler function typically used for state management.
statusBooleanNotrue falsefalseIndicates 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;
PropertyTypeRequiredOptionsDefaultDescription
autoFocusBooleanNotrue falsefalseIf true, automatically focuses the input when the component mounts.
classNameStringNon/an/aAdditional CSS class names that can be applied to the input.
disabledBooleanNotrue falsefalseIf true, disables the input field.
focusBooleanNotrue falsefalseControls whether the input field should automatically receive focus when the component is rendered.
helpTextStringNon/an/aOptional text under the input to guide the user or provide additional information.
iconStringNon/an/aSpecifies the name of the icon to be displayed inside the input.
labelStringNon/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.
maxNumberNon/an/aSpecifies the maximum value that the input field can accept.
maxLengthNumberNon/an/aSpecifies the maximum number of characters that the input field can accept.
minNumberNon/an/aSpecifies the minimum value that the input field can accept.
nameStringNon/an/aIndicates the name attribute for the input element, which represents the form data after it is submitted.
onChangeFunctionNon/an/aAllows the user to update the value of the input field and synchronizes the field's value with the component's internal state.
prefixStringNon/an/aText or characters to display at the start of the input, e.g., 'USD' for currency.
requiredTextStringNon/an/aText displayed when input validation fails, used to indicate an error.
setShowErrorFunctionNon/an/aFunction used to change the state of showError.
sizeStringNoxs md lgmdSets the size of the input field.
suffixStringNon/an/aOptional suffix text to display inside the input field.
showErrorBooleanNotrue falsefalseIf true, indicates that an error message should be displayed, usually controlled by setShowError.
typeStringNocolor date datetime-local email file image month number password tel text time url weektextType of input
valueString / NumberNon/an/aThe 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;
PropertyTypeRequiredOptionsDefaultDescription
classNameStringNon/an/aAdditional CSS class names that can be applied to the inputChip.
placeholderStringYesn/an/aDisplays a suggested or descriptive text inside the input field before the user types.
keywordsListArrayYesn/an/aThis 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.
setKeywordsListStringYesn/an/aDynamically 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.
counterBooleanNon/afalseIf true, it will display a progressive and numeric counter of keywords. If false, it will not display it.
nonRecomendedKeywordsNumberNon/an/aThis 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.
recomendedKeywordsNumberNon/an/aSpecifies the recommended number of keywords. When the keywords list (keywordsList) reaches the recommended number, the counter's status will change to the 'warning' color.
maxKeywordsNumberYesn/an/aIndicates 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.
requiredTextStringYesn/an/aTexto 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;
PropertyTypeRequiredOptionsDefaultDescription
apiGetEmailArrayYesn/an/aEndpoint required to fetch the email list. The response should be an array of strings (or empy array) displayed below the input and titleList.
apiPostEmailStringYesn/an/aAn endpoint is required to add or remove emails from the existing email list.
labelStringNon/a''Allows adding custom text as the input label.
showModalBooleanNotrue falsetrueIf true, the email list received from apiGetEmail will be shown when rendering InputEmail.
textButtonStringNon/a''Allows adding custom text to the button for adding emails.
textErrorStringNon/a''Allows adding custom error text when entering an invalid email address.
titleListStringNon/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>;
PropertyTypeRequiredOptionsDefaultDescription
classNameStringNon/an/aAdditional CSS class names that can be applied to the radio button.
idStringNon/an/aThe unique identifier for the radio button. It is used for linking the label and the radio button.
nameStringNon/an/aThe name attribute of the radio button. Used to group multiple radios into a single group.
setStatusFunctionNon/an/aIt is used to update the selection state of the radio button based on user interaction.
statusBooleanNotrue falsefalseIndicates 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>;
PropertyTypeRequiredOptionsDefaultDescription
classNameStringNon/a' 'Additional CSS class names that can be applied to the switch.
iconBooleanNotrue falsefalseIf true, displays an icon (play/pause) inside the switch.
idStringNon/an/aIt 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.
nameStringNon/an/aThe name attribute of the switch. Used to identify the form data after it's submitted.
setStatusFunctionNon/an/aFunction to set the status of the switch. This is a handler function typically used for state management.
statusNumber / BooleanNo0 10Indicates whether the switch is on (1 / true) or off (0 / false).
switchPositionStringNostart endstartDetermines 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)}
/>;
PropertyTypeRequiredOptionsDefaultDescription
classNameStringNon/an/aAdditional CSS class names that can be applied to the textarea.
helpTextStringNon/an/aOptional text under the textarea to guide the user or provide additional help information.
labelStringNon/a'Label'Text label for the textarea field.
nameStringNon/an/aAttribute of the textarea. Used to identify the form data after it's submitted.
onChangeFunctionNon/an/aFunction to handle changes to the textarea's value. Typically used to update state.
requiredTextStringNon/an/aText displayed when textarea validation fails, used to indicate an error.
setShowErrorFunctionNon/an/aFunction to set the visibility of the error message.
showErrorBooleanNotrue falsefalseIf true, indicates that an error message should be displayed controlled by setShowError.
sizeStringNoxs md lgmdSets the size of the textarea field.
valueStringNon/an/aThe 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;
PropertyTypeRequiredOptionsDefaultDescription
animationBooleanNotrue falsefalseIf true, adds animation effects to the alert. If false, does not add any effects.
childrenNodeYesn/an/aContent inside the alert.
classNameStringNon/an/aAdditional CSS class for the alert.
iconBooleanNotrue falsetrueIf 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.
onCloseFunctionNon/anullBy default, onClose is null. You can provide a function for this property, which allows you to perform additional actions when the alert is closed.
sizeStringNoxs md lg mdinfoSize of the alert.
typeStringYesinfo success warning dangerinfoType 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=''
/>;
PropertyTypeRequiredOptionsDefaultDescription
animationStringNobeat fade beat-fade bounce flip shake spin spin-reverseStringAnimation for the icon.
classNameStringNon/an/aAdditional CSS class for the icon.
iconNameStringNon/auser-bounty-hunterName of the icon.
scaleNumberNo0.7, 1, 2, 3, 41Scale of the icon.
styleStringNolight solid regular thin duotone sharpsolidStyle of the icon.

LoginSource

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

<LoginSource logo={'groovinads'} />;
PropertyTypeRequiredOptionsDefaultDescription
logoStringNogroovinads google microsoft linkedingroovinadsSpecifies 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;
PropertyTypeRequiredOptionsDefaultDescription
childrenNodeNon/an/aContent to be displayed inside the pill component.
classNameStringNon/an/aAdditional CSS class names that can be applied to the pill. Defaults to an empty string.
closeButtonBooleanNotrue falsefalseIf true, a close button is displayed on the pill, allowing it to be dismissed. If false, no close button is shown.
colorStringNoblue danger dark green light midtone neutral red yellowneutralSpecifies the background color of the pill.
onClickFunctionNon/an/aHandles 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' />;
PropertyTypeRequiredOptionsDefaultDescription
scaleNumberNo0.7 1 2 3 4 11Scale (size) of th
1.2.53

9 months ago

1.2.57

7 months ago

1.2.54

8 months ago

1.2.55

8 months ago

1.2.58

7 months ago

1.2.60

6 months ago

1.2.63

6 months ago

1.2.64

6 months ago

1.2.61

6 months ago

1.2.62

6 months ago

1.2.67

5 months ago

1.2.68

5 months ago

1.2.65

6 months ago

1.2.66

5 months ago

1.2.69

5 months ago

1.2.52

9 months ago

1.2.51

9 months ago

1.2.41

11 months ago

1.2.42

11 months ago

1.2.40

11 months ago

1.2.45

11 months ago

1.2.46

10 months ago

1.2.43

11 months ago

1.2.44

11 months ago

1.2.49

10 months ago

1.2.47

10 months ago

1.2.48

10 months ago

1.2.50

10 months ago

1.2.0

1 year ago

1.2.8

1 year ago

1.2.7

1 year ago

1.2.6

1 year ago

1.2.5

1 year ago

1.2.4

1 year ago

1.2.3

1 year ago

1.2.2

1 year ago

1.2.1

1 year ago

1.2.12

1 year ago

1.2.13

1 year ago

1.2.10

1 year ago

1.2.11

1 year ago

1.2.16

1 year ago

1.2.17

1 year ago

1.2.14

1 year ago

1.2.15

1 year ago

1.2.18

1 year ago

1.2.19

1 year ago

1.2.20

1 year ago

1.2.23

1 year ago

1.2.24

1 year ago

1.2.21

1 year ago

1.2.22

1 year ago

1.2.27

1 year ago

1.2.28

1 year ago

1.2.25

1 year ago

1.2.26

1 year ago

1.2.29

1 year ago

1.2.30

1 year ago

1.2.31

1 year ago

1.2.9

1 year ago

1.2.34

12 months ago

1.2.35

12 months ago

1.2.32

1 year ago

1.2.33

1 year ago

1.2.38

12 months ago

1.2.39

12 months ago

1.2.36

12 months ago

1.2.37

12 months ago

1.1.7

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.4

1 year ago

1.0.0

1 year ago