groovinads-ui v1.2.69
Included components
The library includes the following components:
- Button: For user actions.
- DropdownComponent: For dropdown menus.
- DropdownDatePicker: For filter dropdowns.
- DropdownFilter: For filter dropdowns.
- DropdownMultiSelect: For dynamically managing and displaying keywords.
- DropdownSimpleDatePicker: For filter dropdowns.
- 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.
- 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.
- 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'
/>;
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;
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 |
9 months ago
7 months ago
8 months ago
8 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
5 months ago
6 months ago
5 months ago
5 months ago
9 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
10 months ago
10 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
12 months ago
12 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
12 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