Reaction Docs - API: Components/Helpers

Components/Helpers

Source:

imports/plugins/core/components/lib/composer/tracker.js, line 22

Methods

(static) Blocks(props) → {React.Component}

Source:

imports/plugins/core/components/lib/blocks.js, line 9

Parameters:

Name	Type	Description
`props`	Object	Component props

Returns:

returns a React component containing requested blocks

Type: React.Component

(static) composeWithTracker(reactiveMapper, options) → {function}

A higher order component to wrap a reactive function with Meteor's Tracker

Source:

imports/plugins/core/components/lib/composer/tracker.js, line 51

Parameters:

Name	Type	Description
`reactiveMapper`	function	data fetching function to bind to a tracker
`options`	React.Component \| Boolean \| Object	can be a custom loader, false (to disable), or a full options object

Returns:

composed function

Type: function

(static) copyBlockHOCs(sourceRegionName, sourceBlockName, targetBlock) → {function|React.Component}

Wrap a new component with the HOCs from a different component

Source:

imports/plugins/core/components/lib/blocks.js, line 248

Parameters:

Name	Type	Description
`sourceRegionName`	String	The name of the block region
`sourceBlockName`	String	The name of the block component to get the HOCs from
`targetBlock`	function \| React.Component	Block component to wrap

Returns:

A new component wrapped with the HOCs of the source component

Type: function | React.Component

(static) copyHOCs(sourceComponentName, targetComponent) → {function|React.Component}

Wrap a new component with the HOCs from a different component

Source:

imports/plugins/core/components/lib/components.js, line 147

Parameters:

Name	Type	Description
`sourceComponentName`	String	The name of the component to get the HOCs from
`targetComponent`	function \| React.Component	Component to wrap

Returns:

A new component wrapped with the HOCs of the source component

Type: function | React.Component

(static) getBlock(regionName, blockName) → {function|React.Component}

Get a block registered with registerBlock({ name, component, hocs, region }).

Source:

imports/plugins/core/components/lib/blocks.js, line 143

Parameters:

Name	Type	Description
`regionName`	String	The name of region the block belongs to.
`blockName`	String	The name of the block.

Returns:

A (wrapped) React component

Type: function | React.Component

(static) getBlockHOCs(regionName, blockName) → {function|React.Component}

Get the raw UI component without any possible HOCs wrapping it.

Source:

imports/plugins/core/components/lib/blocks.js, line 236

Parameters:

Name	Type	Description
`regionName`	String	The name of the block region.
`blockName`	String	The name of the block component to get HOCs from.

Returns:

Array of HOCs

Type: function | React.Component

(static) getBlocks(regionName) → {function|React.Component}

Get a component registered with registerComponent(name, component, ...hocs).

Source:

imports/plugins/core/components/lib/blocks.js, line 164

Parameters:

Name	Type	Description
`regionName`	String	The name of the region to get.

Returns:

A (wrapped) React component

Type: function | React.Component

(static) getComponent(name) → {function|React.Component}

Get a component registered with registerComponent(name, component, ...hocs).

Source:

imports/plugins/core/components/lib/components.js, line 80

Parameters:

Name	Type	Description
`name`	String	The name of the component to get.

Returns:

A (wrapped) React component

Type: function | React.Component

(static) getHOCs(name) → {function|React.Component}

Get the raw UI component without any possible HOCs wrapping it.

Source:

imports/plugins/core/components/lib/components.js, line 136

Parameters:

Name	Type	Description
`name`	String	The name of the component to get.

Returns:

Array of HOCs

Type: function | React.Component

(static) getRawBlockComponent(regionName, blockName) → {function|React.Component}

Get the raw UI component without any possible HOCs wrapping it.

Source:

imports/plugins/core/components/lib/blocks.js, line 224

Parameters:

Name	Type	Description
`regionName`	String	The name of the block region.
`blockName`	String	The name of the block component to get.

Returns:

A React component

Type: function | React.Component

(static) getRawComponent(name) → {function|React.Component}

Get the raw UI component without any possible HOCs wrapping it.

Source:

imports/plugins/core/components/lib/components.js, line 125

Parameters:

Name	Type	Description
`name`	String	The name of the component to get.

Returns:

A React component

Type: function | React.Component

(static) loadRegisteredBlocks() → {Object}

Populate the final BlockComponents object with the contents of the lookup table. This should only be called once on app startup.

Source:

imports/plugins/core/components/lib/blocks.js, line 263

Returns:

An object containing all of the registered blocks by region

Type: Object

(static) loadRegisteredComponents() → {Object}

Populate the final Components object with the contents of the lookup table. This should only be called once on app startup.

Source:

imports/plugins/core/components/lib/components.js, line 162

Returns:

An object containing all of the registered components

Type: Object

(static) registerBlockHOC(regionName, blockName, hocs) → {undefined}

Source:

imports/plugins/core/components/lib/blocks.js, line 102

Parameters:

Name	Type	Description
`regionName`	String	The name of region the block belongs to.
`blockName`	String	The name of the block.
`hocs`	function \| Array	The HOCs to wrap around the raw component.

Returns:

Type: undefined

(static) registerComponent(options, rawComponent, hocs) → {React.Component}

Source:

imports/plugins/core/components/lib/blocks.js, line 41

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:

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

Parameters:

Name Type Description

options

Object

The name of the component to register.

Properties

Name	Type	Description
`name`	Object	The name of the component to register.
`component`	Object	The name of the component to register.
`region`	Object	The name of the component to register.
`priority`	Object	The name of the component to register.
`priority`	Object	The name of the component to register.

rawComponent

React.Component

Interchangeable/extendable component.

hocs

function | Array

The HOCs to wrap around the raw component.

Returns:

returns the final wrapped component

Type: React.Component

(static) registerComponent(name, rawComponent, hocs) → {React.Component}

Source:

imports/plugins/core/components/lib/components.js, line 6

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
}

Parameters:

Name	Type	Description
`name`	String	The name of the component to register.
`rawComponent`	React.Component	Interchangeable/extendable component.
`hocs`	function \| Array	The HOCs to wrap around the raw component.

Returns:

returns the final wrapped component

Type: React.Component

(static) registerHOC(name, hocs) → {undefined}

Source:

imports/plugins/core/components/lib/components.js, line 40

Parameters:

Name	Type	Description
`name`	String	The name of the component to register.
`hocs`	function \| Array	The HOCs to wrap around the raw component.

Returns:

Type: undefined

(static) replaceBlock(options) → {function|React.Component}

Replace a Reaction component with a new component and optionally add one or more higher order components. This function keeps track of the previous HOCs and wraps the new HOCs around previous ones

Source:

imports/plugins/core/components/lib/blocks.js, line 193

Parameters:

Name Type Description

options

Object

Object containing block information

Properties

Name	Type	Description
`region`	String	The region of the block that will be replaced
`block`	String	The name of the block that will be replaced
`component`	React.Component	Interchangeable/extendable component.
`hocs`	function \| Array	The HOCs to compose with the raw component.

Returns:

A component callable with Components[name]

Type: function | React.Component

(static) replaceComponent(name, newComponent, hocs) → {function|React.Component}

Replace a Reaction component with a new component and optionally add one or more higher order components. This function keeps track of the previous HOCs and wraps the new HOCs around previous ones

Source:

imports/plugins/core/components/lib/components.js, line 101

Parameters:

Name	Type	Description
`name`	String	The name of the component to register.
`newComponent`	React.Component	Interchangeable/extendable component.
`hocs`	function \| Array	The HOCs to compose with the raw component.

Returns:

A component callable with Components[name]

Type: function | React.Component

(static) withAnimateHeight(component) → {function}

A wrapper that reactively injects an extended version of react-animate-height's into a component.

Source:

imports/plugins/core/components/lib/hoc.js, line 179

Parameters:

Name	Type	Description
`component`	function \| React.Component	the component to wrap

Returns:

the new wrapped component with a "AnimateHeight" prop

Type: function

(static) withCSSTransition(component) → {Object}

A wrapper to dynamically import & inject react-transition-group's into a component

Source:

imports/plugins/core/components/lib/hoc.js, line 145

Parameters:

Name	Type	Description
`component`	function \| React.Component	the component to wrap

Returns:

the new wrapped component with a "CSSTransition" prop

Type: Object

(static) withCurrentAccount(component) → {function}

A wrapper to reactively inject the current account into a component. This assumes you have signed up and are not an anonymous user.

Source:

imports/plugins/core/components/lib/hoc.js, line 83

Parameters:

Name	Type	Description
`component`	function \| React.Component	the component to wrap

Returns:

the new wrapped component with a "currentAccount" prop

Type: function

(static) withCurrentUser(component) → {function}

A wrapper to reactively inject the current user into a component

Source:

imports/plugins/core/components/lib/hoc.js, line 19

Parameters:

Name	Type	Description
`component`	function \| React.Component	the component to wrap

Returns:

the new wrapped component with a "currentUser" prop

Type: function

(static) withIsAdmin(component) → {function}

A wrapper to reactively inject the current user's admin status. Sets a boolean 'isAdmin' prop on the wrapped component.

Source:

imports/plugins/core/components/lib/hoc.js, line 115

Parameters:

Name	Type	Description
`component`	function \| React.Component	the component to wrap

Returns:

the new wrapped component with an "isAdmin" prop

Type: function

(static) withIsOwner(component) → {function}

A wrapper to reactively inject the current user's owner status. Sets a boolean 'isOwner' prop on the wrapped component.

Source:

imports/plugins/core/components/lib/hoc.js, line 130

Parameters:

Name	Type	Description
`component`	function \| React.Component	the component to wrap

Returns:

the new wrapped component with an "isOwner" prop

Type: function

(static) withMoment(component) → {function}

A wrapper to reactively inject the moment package into a component

Source:

imports/plugins/core/components/lib/hoc.js, line 34

Parameters:

Name	Type	Description
`component`	function \| React.Component	the component to wrap

Returns:

the new wrapped component with a "moment" prop

Type: function

(static) withMomentTimezone(component) → {function}

A wrapper to reactively inject the moment package into a component

Source:

imports/plugins/core/components/lib/hoc.js, line 59

Parameters:

Name	Type	Description
`component`	function \| React.Component	the component to wrap

Returns:

the new wrapped component with a "moment" prop

Type: function