❤
npm
Sign UpSign In

groovinads-ui

1.2.53 • Public • Published

Groovinads logo

Groovinads UI is a React component library that provides ready-to-use UI elements based on the Groovinads UI kit. This library is designed to facilitate the implementation of common UI elements in Groovinads applications.

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'}
	onClick={() => {
		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.

Dropdowns

DropdownComponent

import React, { useState } from 'react';
import { DropdownComponent, Button, , Icon } from 'groovinads-ui' ;
import { Dropdown } 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>

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

export default DropdownComponentExample;
Dropdown width submenu
<DropdownComponent
	{...args}
	show={show}
	setShow={setShow}
	autoClose={'outside'}
>
	<DropdownToggle onClick={() => handleToggle()}>Toggle</DropdownToggle>
	<DropdownMenu>
		<DropdownItem>
			<DropdownComponent {...args} autoClose={'outside'} drop={'end'}>
				<DropdownToggle as={'div'}>Toggle</DropdownToggle>
				<DropdownMenu>
					<DropdownItem>Item 1</DropdownItem>
					<DropdownItem>Item 2</DropdownItem>
					<DropdownItem>Item 3</DropdownItem>
				</DropdownMenu>
			</DropdownComponent>
		</DropdownItem>
		<DropdownItem>Item 2</DropdownItem>
		<DropdownItem>Item 3</DropdownItem>
	</DropdownMenu>
</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}
			/>
		</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.

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}
				/>
			</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.

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}
		/>
	);
};

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

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.
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.

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 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 the spinner.
className String No n/a n/a Additional CSS class for the spinner.

StatusIcon

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

const StatusIconExamples = () => {
	return (
		<div>
			<StatusIcon animated={false} className='' status={0} />
			<StatusIcon animated={true} className='mt-2' status={1} />
			<StatusIcon animated={false} className='mt-2' status={3} />
			<StatusIcon animated={false} className='mt-2' status={4} />
			<StatusIcon animated={false} className='mt-2' status={5} />
		</div>
	);
};

export default StatusIconExamples;
Property Type Required Options Default Description
animated Boolean No true false false If true, the icon will include animation effects, applied only to the active state (status={1}). If false, no animations will be applied.
className String No n/a n/a Add additional CSS class names for custom styling.
status Number Yes 0 1 3 4 5 0 Specifies the visual state of the icon: Inactive (0), active (1), active-warning (3), warning (4), and danger (5). Each state reflects a specific condition of the system or interface.

Navigation

Navbar

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

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

	return (
		<div>
			<Button onClick={() => setShow((prev) => !prev)}>Toggle Sidebar</Button>
			<Navbar
				logoUrl='https://ui.groovinads.com/assets/groovinads-logo.svg' // custom url
				showDeckMenu={true}
				showUserMenu={true}
				show={show}
				setShow={setShow}
			>
				<div>Custom Content</div>
			</Navbar>
		</div>
	);
};

export default NavbarComponent;
Property Type Required Options Default Description
children Node No n/a n/a Allows inserting custom content within the Navbar.
logoUrl String No n/a n/a Accepts a URL to customize the logo image. If empty, show the Groovinads logo.
setShow Function No n/a n/a Function to toggle the visibility state between visible and hidden.
show Boolean No true false n/a Controls the visibility of the sidebar. If true, the sidebar is displayed; if false, it is hidden.
showDeckMenu Boolean No true false false Controls the visibility of the deck menu in the navbar. If true, it is displayed; if false, it is hidden.
showUserMenu Boolean No true false false Controls the visibility of the user menu. If true, the user menu is shown; if false, it is hidden.

Sidebar

import { Sidebar } from 'groovinads-ui';
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

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

  const navigate = useNavigate();

    const handleNavigation = (url) => {
        navigate(url);
        console.log("Cliente seleccionado:", client);
    };

  return (
      <div>
        <button onClick={() => setShowSidebar(prev => !prev)}>
          Toggle Sidebar
        </button>
        <Sidebar
          customLinks={[
            {
              title: 'sectionTitle',
              links: [
                {
                  name: 'Home',
                  icon: 'home',
                  url: '/example-url',
                  children: [ // the section link item will be an item with expansion
                    name: 'Nested Link Name',
                    url: '/nested-link-url',
                  ],
                },
              ],
            },
            {
              title: 'sectionCustom2', // non-custom
              backData: true,
            },
          ]}
        defaultOpened={false}
        show={show}
        setShow={setShow}
        onNavigate={handleNavigation}
        dropdownVisible={true}
        setGroovinProfile={setGroovinProfile}
        selectedClient={selectedClient}

      />
    </div>
  );
};

export default SidebarComponent;
Property Type Required Options Default Description
api String No n/a n/a It is the url corresponding to your api. From which you will receive the data, which will be used in the non-custom section.
customLinks Array Yes n/a n/a Creates the sections of the component based on the array of objects it receives. title names each section, and links is a section link item, that can optionally, contain an array of children for nested links. To use external data obtained from the api property, the object must contain the property backData={true}.
defaultOpened Boolean No true false false Determines whether the sidebar is initially opened or closed.
onNavigate Function Yes n/a n/a Allows handling navigation to the url of the link when an item in the sidebar is clicked. You should provide a function to define how the navigation should be handled (handleNavigation). In our environment, use React Router DOM for navigation.
setShow Function No n/a n/a Function to toggle the visibility state between visible and hidden.
show Boolean No true false false Controls the visibility of the sidebar from an external state. If true, the sidebar is displayed; if false, it is hidden.
showClients Boolean String No true false single false Controls the visibility of the DropdownClient. . Accepts true or false for visibility, or 'single' to show only one client.
setGroovinProfile Function No n/a n/a Updates the user's profile when a client is selected, used in the DropdownClients subcomponent.
selectedClient Object No n/a n/a Represents the selected client object, used to display client-specific data in the sidebar.

Stepper

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

const steps = ['Step 1', 'Step 2', 'Step 3'];

const StepperComponent = () => {
	return <Stepper list={steps} current={1} />;
};

export default StepperComponent;
Property Type Required Options Default Description
current Number Yes n/a n/a Uses a number to specify the index in the list array, determining which step is highlighted as the current one and applying a specific style.
list Array Yes n/a n/a Array of steps to be displayed in the stepper. Each item represents a step.

Tabnav

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

const tabs = [
	{
		tab: 'Tab Name', // Required, name of the tab to display.
		badgeNumber: 'Badge', // Badge number to display on the tab.
		url: '/url', // Navigation.
		warningIcon: false, // Boolean to display a warning icon.
	},
	//Other tabs...
];

const TabnavComponent = (
	tabs = [],
	activeTab = 1,
	navigateTab = false,
	setActiveTab,
) => {
	const [activeTab, setActiveTab] = useState(2);

	return (
		<div>
			{/* Usage with internally managed state */}
			<Tabnav tabs={tabs} />

			{/* External state to manage the active tab */}
			<Tabnav tabs={tabs} activeTab={activeTab} setActiveTab={setActiveTab} />

			{/* Usage with navigation enabled */}
			<Tabnav tabs={tabs} navigateTab={true} />
		</div>
	);
};

export default TabnavComponent;
Property Type Required Options Default Description
activeTab Number No n/a 1 Displays the active tab. By default, it is set to 1. You can use it alone to define the active tab or in combination with setActiveTab to manage external state and customize the initial active tab by providing a number.
navigateTab Boolean No true false true If true, it enables navigation to the specified URL when the tab is selected.
setActiveTab Function No n/a n/a Allows the component to be managed through external state. If provided, Tabnav will update the active tab using this property.
tabs Array Yes n/a [ ] Each array of objects represents tabs. Each object must have a tab key and may have badgeNumber, url, and warningIcon keys.

Toasts

ToastComponent

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

const ToastExample = () => {
	const [selected, setSelected] = useState(null);

	const pushToast = () => {
    
		const toast = {
			variant: 'info',
			autoClose: true,
			children: 'Se eliminó',
		};

		setSelected(toast);
	};

	return (
		<>
			<Button onClick={pushToast}>Nuevo toast</Button>
			<ToastComponent toast={selected} position='bottom-end' />
		</>
	);
};

export default ToastExample;

| Property | Type | Required | Options | Default | Description |

Propiedad Tipo Requerido Valores Permitidos Valor Predeterminado Descripción
position String No top-start top-end bottom-start bottom-end bottom-end Define la posición en la pantalla donde se mostrará el toast.
toast Object No n/a n/a Objeto que contiene las propiedades del toast.
toast.autoClose Boolean No true false true Si es true, se cierra automáticamente después de un cierto tiempo. Si es false, permanece en la pantalla hasta que el usuario lo cierre manualmente.
toast.children Node No n/a n/a Contenido personalizado dentro del toast.
toast.className String No n/a n/a Nombre de clase personalizado para el toast.
toast.variant String No info success warning error info Define el tipo de mensaje que se mostrará. Dependiendo del valor, se muestra un icono diferente asociado con cada tipo de mensaje.

ToastProgress

import React from 'react';
import ToastProgress from './ToastProgress';

const MyToastExamples = () => {
	return (
		<div>
			{/* display in-progress */}
			<ToastProgress
				variant='upload'
				status='in-progress'
				currentProgress={75}
				position='top-end'
				cancelButton={true}
				onCancel={() => alert('Upload canceled')}
			/>

			{/* Display processing in-progress */}
			<ToastProgress
				variant='processing'
				status='in-progress'
				position='bottom-start'
			/>

			{/* Display error during upload */}
			<ToastProgress
				variant='upload'
				status='error'
				currentProgress={0}
				position='bottom-end'
			/>
		</div>
	);
};

export default MyToastExamples;
Property Type Required Options Default Description
cancelButton Boolean No true false false Determines whether to show a cancel button.
currentProgress Number No n/a n/a Indicates the current progress of the task as a percentage with a number from 1 to 100. Used only when variant is set to upload
onCancel Function No n/a n/a If cancelButton is true, it will display a cancel button that will execute the function provided in the onCancel prop when clicked.
position String No top-start top-end bottom-start bottom-end bottom-start Defines the position on the screen where the toast will be displayed.
status String No in-progress error in-progress Define the current state of the task. If in-progress, shows the ongoing progress, reflected in the progress bar. If error, indicates that the upload or processing has failed.
variant String Yes upload processing n/a Define the type of process being performed. If upload, displays a progress bar and a loading status indicator. If upload, displays a progress bar and a loading status indicator.

Customization

Currently, the components are not customizable.

Contributions

This library is for internal use by Groovinads and is not open to external contributions.

For more information or support, contact the Groovinads development team.

Readme

Keywords

Package Sidebar

Install

npm i groovinads-ui

Repository

bitbucket.org/groovinads/react-components

Homepage

www.groovinads.com/

Weekly Downloads

9

Version

1.2.53

License

MIT

Unpacked Size

3.38 MB

Total Files

84

Last publish

Collaborators

  • pablo.pinero
Try on RunKit
Report malware