Components

Components

Source:

Reaction Components API - Most of the React components in the Reaction UI can be replaced or extended with the API outlined here. This allows anyone to create a custom plugin that can easily change the look of the UI and/or extend its functionality without having to edit core Reaction code. See full tutorial and documentation.

Example

// Register a component and container(s) with a name.
// The raw component can then be extended or replaced.

// Structure of a component in the list:

ComponentsTable.MyComponent = {
   name: 'MyComponent',
   hocs: [fn1, fn2],
   rawComponent: React.Component
}

Classes

CompletedOrderItem

Shows the individual line items for a completed order

CompletedOrderSummary

Display the summary/total information for an order

ShopOrderSummary

Displays the order summary for each shop

Methods

(static) CompletedOrder(props) → {Node}

Displays a summary/information about the order the user has just completed

Source:
Properties:
Name Type Description
order Object

An object representing the order

paymentMethods Array

An array of paymentMethod objects

isProfilePage Boolean

A boolean value that checks if current page is user profile page

Parameters:
Name Type Description
props Object

React PropTypes

Returns:

React node containing the top-level component for displaying the completed order/receipt page

Type
Node

(static) CompletedOrderPaymentMethod(props) → {Node}

Displays one of possibly many payment methods on an order

Source:
Properties:
Name Type Description
paymentMethod Object

An object representing the payment method

Parameters:
Name Type Description
props Object

React PropTypes

Returns:

React node containing each payment method

Type
Node

(static) CompletedShopOrders(props) → {Node}

Displays the order breakdown for each Shop

Source:
Properties:
Name Type Description
shopName String

The name of the shop

items Array

an array of individual items for this shop

isProfilePage boolean

Checks if current page is profile page

Parameters:
Name Type Description
props Object

React PropTypes

Returns:

React node containing the break down of the order by Shop

Type
Node

(static) EditButton(props) → {IconButton}

EditButton component

Source:

Edit button is a special type of Icon Button that is toggable by default and presents a pencil ( or edit icon ) in its of state, and a check ( or success icon) when it is on.

Use this button in places where you need a pre-styled button for toggling editing states of components.

Parameters:
Name Type Description
props Object

Props passed into component

Returns:

Retruns an IconButton component with pre-configured icons for editing

Type
IconButton

(static) Handle(props) → {node}

Handle is a special type of button used for drag handles.

Source:

Handle is a special type of button used for drag handles. It uses the fa-bars icon by default, and does not have click or hover states

Use this button in places where you need a pre-styled button for drag handles

Parameters:
Name Type Description
props Object

Props passed into component

Returns:

component with pre-configured icon for dragging

Type
node

(static) NotFound(props) → {Node}

React component for displaying a not-found view

Source:
Properties:
Name Type Description
className String | Object

String className or classnames compatible object for the base wrapper

contentClassName String | Object

String className or classnames compatible object for the content wrapper

i18nKeyMessage String

i18n key for message

i18nKeyTitle String

i18n key for title

icon String

icon font class names

message String

extra message text

title String

title of page

Parameters:
Name Type Description
props Object

React PropTypes

Returns:

React node containing not-found view

Type
Node

(static) ToolbarGroup(props) → {node}

Source:
Parameters:
Name Type Description
props Object

component props

Returns:

react element node

Type
node

(static) ToolbarText(props) → {node}

Source:
Parameters:
Name Type Description
props Object

component props

Returns:

react element node

Type
node

(static) VisibilityButton(props) → {IconButton}

Visibility button is a special type of Icon Button that is toggable by default and presents a eye icon in its on state, and a eye-slash icon when it is off.

Source:

Visibility button is a special type of Icon Button that is toggable by default and presents a eye icon in its on state, and a eye-slash icon when it is off.

Use this button in places where you need a pre-styled button for toggling visibility states of components.

Parameters:
Name Type Description
props Object

Props passed into component

Returns:

Retruns an IconButton component with pre-configured icons for visibility

Type
IconButton