Encore Components

React Components for Encore sites and widgets

Install

$ npm install encore-components

Usage

1. Import component
2. Render component using ReactDOM

Documentation

Spinner

Render spinner with overlay. Can be used to show loader when application is loading. #####Props

Prop	Type	Description	Is required?
classModifier	string	External CSS class that will be added to the spinner	no
message	string	Text message shown above spinner	no
withOverlay	boolean	Define overlay visibility	no
stylesConfig	object	Configuration of spinner styles	no

Popup

Render popup. Can be used to show content in popup modal. #####Props

Prop	Type	Description	Is required?
hasHeader	boolean	Toggle header (default true)	no
hasOverlay	boolean	Toggle overlay (default true)	no
title	string	Header title	no
theme	string	Define theme. ( default
onClose	func	Callback function to close.	no

Calendar

Render calendar to page. #####Props

Prop	Type	Description	Is required?
options	object	Options object	no
isLoading	boolean	Toggle spinner appearance	no
spinnerMessage	string	Attach msg to loading spinner	no
disabledSelect	boolean		no
cssClassName	string	Classname of calendar	no
themeConfiguration	object		no
parentTemplate	string		no
isError	boolean		no
onMonthSelector...	boolean	"onMonthSelectorChange"	no
		(date: string)
onValueUpdate	func	(selectedDates: Date[], selectedDay: string)	no
onReady	func	(args: CalendarCallbackArguments)	no
onMonthChange	func	(instance: Instance)	no
shouldCalendarR...	boolean	"shouldCalendarRemainOpenOnFormClick"	no
spinnerStylesConfig	object	Configuration of spinner styles	no

Error message

Render error message popup #####Props

Prop	Type	Description	Is required?
message	string	Text inside the error component	yes
onClick	func	CB when popup is clicked	yes

Carousel

Render carousel according to passed data. #####Props

Prop	Type	Description	Is required?
widgetName	string	To understand from what widget click has fired.	yes
slidesToShow	number	Amount of slides to show. Otherwise will be set 1	no
slideWidth	number	Width of each item in carousel. Otherwise will be set 250	no
carouselList	{id: string; name: string; imageUrl: string;}[]	Array of carousel items data. Otherwise will be used mocked data	no
customContent	JSX.Elements[]	Array of elements with injected data which are going to be rendered as items. Otherwise will be used default JSX template	no