@acctglobal/stickbar

Installation

yarn add @acctglobal/stick-bar
npm install @acctglobal/stick-bar

import { StickBar } from '@acctglobal/stick-bar'

StickBar

StickBar is a Component of a Carousel of texts that came from props.

Configuration

1. Add import from component

import StickBar from '@acctglobal/stick-bar';

2. Now call StickBar in code and pass the required props, texts must to be an Array of strings.

Component being Called with only mandatory props will look like this:

<StickBar texts={texts} />

Component can be customized with use of props:

<StickBar 
texts={TopBarTexts}
arrows={{ iconColor: '#fff', isArrowVisible: true, style: { backgroundColor: 'transparent' } }}
bullets={{ bulletDisableColor: '#000', bulletEnableColor: '#E8E8E8', isBulletVisible: true, numeric: true, style: { background: 'transparent' } }}
/>

StickBarProps:

Prop name	Type	Description
texts	string[ ]	The texts that must be rendered inside of Carousel
arrows	Object	Customize the arrows from Carousel
bullets	Object	Customize the bullets from Carousel

Arrows Object:

Prop name	Type	Description
isArrowVisible	boolean	Defines if the arrow will be visible in Carousel
iconColor	string	Change the arrow color
style	Object	Accept all kind of styles

Bullets Object :

Prop name	Type	Description
numeric	boolean	Defines a numeric bullet
bulletEnableColor	string	Defines the color of the enabled bullet
bulletDisableColor	string	Defines the color of the disabled bullet
isBulletVisible	boolean	Defines if the bullet will be visible
style	Object	Accept all kind of styles