Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-terrific-bridge
Advanced tools
Readme
The Terrific Bridge is used to manage Frontend UI components inside React. It can be used to register components, send and receive actions (bidirectional) and handle application starts & stops. Remember that the TerrificBridge is a singleton and can be instanciated once per Application.
import TerrificBridgeInstance, { TerrificBridge, TerrificBridgeGlobalAppId, getGlobalApp } from 'react-terrific-bridge';
Singleton instance which should be used to register any components inside the page.
The named export TerrificBridge is the class blueprint of the singleton. You can use it if you need multiple Terrific Applications.
Will be used to make the application available inside the window object if the debug mode is enabled. You can receive the application via te getGlobalApp()
method.
Will return the global application instance if the debug mode was enabled before, otherwise it will return undefined
;
It is recommended to use yarn as package manager and to install react-terrific-bridge
via yarn, allthough it would work with NPM.
yarn add react-terrific-bridge
npm install --save react-terrific-bridge
The most important thing in the bridge is the load()
method, which will bootstrap the Terrific application on the react side.
You must call this method at the root entry of your react app to make it possible to register all components. All components which
are registered before the load function was called will be automatically initialized during the load()
call.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import TerrificBridge from 'react-terrific-bridge';
class App extends Component {
componentDidMount() {
// bootstrap terrific application ...
TerrificBridge.load();
}
render() {
return <h1>Hello there!</h1>;
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Just register a Terrific Component and start it inside the componentDidMount
hook.
import React, { Component } from 'react';
import TerrificBridge from 'helper/terrific';
export default class Slider extends Component {
constructor(props) {
super(props);
this.componentRef = React.createRef();
}
componentDidMount() {
TerrificBridge.registerComponent(this.componentRef.current);
}
componentWillUnmount() {
TerrificBridge.unregisterComponent(this.componentRef.current);
}
render() {
const { modifier, slides } = this.props;
return (
<ul ref={this.componentRef} className={'m-slider' + (modifier ? 'm-slider--' + modifier : '')} data-t-name="Slider">
{slides &&
slides.map((slide, index) => {
return (
<li key={index}>
<img src={slide.image} alt={slide.alt} />
<h5>{slide.caption}</h5>
{slide.text && <p>{slide.text}</p>}
</li>
);
})}
</ul>
);
}
}
If you register a Component with a Functin factory as second parameter, you can specify receive actions which the
Terrific component can execute in the React App. Each Frontend Component has a method called send
which is capable to
transport N arguments.
import React, { Component } from 'react';
import TerrificBridge from 'helper/terrific';
export default class Slider extends Component {
constructor(props) {
super(props);
this.componentRef = React.createRef();
}
componentDidMount() {
// Trigger via T.Module.Slider.send("shouldUpdate");
TerrificBridge.registerComponent(this.componentRef.current, {
shouldUpdate: this.forceUpdate,
});
}
componentWillUnmount() {
TerrificBridge.unregisterComponent(this.componentRef.current);
}
render() {
const { modifier, slides } = this.props;
return (
<ul ref={this.componentRef} className={'m-slider' + (modifier ? 'm-slider--' + modifier : '')} data-t-name="Slider">
{slides &&
slides.map((slide, index) => {
return (
<li key={index}>
<img src={slide.image} alt={slide.alt} />
<h5>{slide.caption}</h5>
{slide.text && <p>{slide.text}</p>}
</li>
);
})}
</ul>
);
}
}
In this part you'll see how to send actions from React to the Frontend UI component. To send actions to the UI component, the
Terrific Component needs to provide an object in its root called actions
. You can call any action defined in this Object.
import React, { Component } from 'react';
import TerrificBridge from 'helper/terrific';
export default class Slider extends Component {
constructor(props) {
super(props);
this.componentRef = React.createRef();
}
componentDidMount() {
TerrificBridge.registerComponent(this.componentRef.current, {
update: this.forceUpdate,
});
}
componentWillUnmount() {
TerrificBridge.unregisterComponent(this.componentRef.current);
}
componentWillReceiveProps(nextProps) {
if (nextProps.forceUpdate && nextProps.forceUpdateId) {
// T.Module.Slider.actions.update(nextProps.forceUpdateId);
TerrificBridge.action(this.componentRef.current, 'update', nextProps.forceUpdateId);
}
}
render() {
const { modifier, slides } = this.props;
return (
<ul ref={this.componentRef} className={'m-slider' + (modifier ? 'm-slider--' + modifier : '')} data-t-name="Slider">
{slides &&
slides.map((slide, index) => {
return (
<li key={index}>
<img src={slide.image} alt={slide.alt} />
<h5>{slide.caption}</h5>
{slide.text && <p>{slide.text}</p>}
</li>
);
})}
</ul>
);
}
}
Just register a Terrific Component and start it inside the componentDidMount
hook.
import React, { Component } from 'react';
import TerrificBridge from 'helper/terrific';
export default class Slider extends Component {
constructor(props) {
super(props);
this.componentRef = React.createRef();
}
componentDidMount() {
TerrificBridge.registerComponent(this.componentRef.current);
}
componentWillUnmount() {
TerrificBridge.unregisterComponent(this.componentRef.current);
}
render() {
const { modifier, slides } = this.props;
return (
<ul ref={this.componentRef} className={'m-slider' + (modifier ? 'm-slider--' + modifier : '')} data-t-name="Slider">
{slides &&
slides.map((slide, index) => {
return (
<li key={index}>
<img src={slide.image} alt={slide.alt} />
<h5>{slide.caption}</h5>
{slide.text && <p>{slide.text}</p>}
</li>
);
})}
</ul>
);
}
}
window
objectThe terrific bridge can be used with a custom terrific module, per default it will look for the window.T
object in your browser.
There are two methods which you can use to override the module:
import TerrificBridge, { TerrificBridge as TerrificBridgeBlueprint } from '@namics/react-terrific-bridge';
import customTerrificModule from 'terrific';
new TerrificBridgeBlueprint({
overrideSingletonInstance: true,
terrific: customTerrificModule,
});
// ...
TerrificBridge.registerComponent(/* ... */);
import TerrificBridge from '@namics/react-terrific-bridge';
import customTerrificModule from 'terrific';
TerrificBridge.useCustomTerrific(customTerrificModule);
Starts the Terrific Application with a configurable set of options.
# | Argument Type | Required |
---|---|---|
1 | Settings: Object | false |
TerrificBridge.load(settings: Object): void
A configuration set for the Bridge Singleton.
Resets the TerrificBridge state (queue, components, amm.) and must be re-loaded afterwards.
TerrificBridge.reset(): void
# | Argument Type | Required |
---|---|---|
1 | DOM Node | true |
2 | BindingFactory {} | false |
TerrificBridge.registerComponent(node, factory: BindingFactory): void
Reference a DOM Node
Can be used for setting actions which the Terrific component can execute.
type BindingFactory = {
[name: string]: Function,
};
Will return a Terrific Component instance.
TerrificBridge.getComponentById(id: number): Object | void
# | Argument Type | Required |
---|---|---|
1 | TerrificId: number | true |
The ID of a component (e.g. 198).
# | Argument Type | Required |
---|---|---|
1 | DOM Node | true |
TerrificBridge.unregisterComponent(node): void
Reference for the React Component DOM Node
# | Argument Type | Required |
---|---|---|
1 | DOM Node | true |
2 | Action: string | true |
N | Arguments: ...any | false |
TerrificBridge.action(node, action: string, ...args: any): void
Reference for the React Component DOM Node
The action to trigger in the FE UI component under actions
.
Pass N arguments after the React Component and the Action to the FE UI.
Actions which can be triggered by a react component must be stored directly inside the module under the variable actions
, otherwise React won't be able to trigger any action on the UI side.
actions = { [actionName]: () => {} }: Object
($ => {
'use strict';
T.Module.Slider = T.createModule({
actions: {},
start(resolve) {
this._setActions();
resolve();
},
stop() {
this._events.off().disconnect();
},
_setActions() {
this.actions = {
update() {
// Place some logic here
},
};
},
/* ... more methods */
});
})(jQuery);
send(actionName: string [, ...args]): void
The send method will be created by the react side of the application. This method allows the UI to trigger custom functions inside a react component e.g. a actionCreator, class methods or something similar.
($ => {
'use strict';
T.Module.Calculator = T.createModule({
start(resolve) {
$(this._ctx)
.find('js-a-button--submit')
.on('click', ev => {
this.onSubmit.call();
});
resolve();
},
onSubmit() {
this.send('submit', this.someValueHere, ['more ...']);
},
/* ... more methods */
});
})(jQuery);
FAQs
A utility belt for using TerrificJS together with React. Provides module registration and unregistration as well as an action API for event bindings, also supporting Flow and TypeScript.
The npm package react-terrific-bridge receives a total of 88 weekly downloads. As such, react-terrific-bridge popularity was classified as not popular.
We found that react-terrific-bridge demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.