tC Tool
This module provides an interface for connecting custom apps/tools to translationCore.
Among other things, this module exposes a HOC that turns any React component into a tool.
installation
npm i tc-tool
Quick Start
To create a tool all you need is a component and a catchy name.
// index.js;; 'awesomeTool'Container;
The above code should be placed in your module's main file (usually index.js
).
Advanced Usage
Locale
Likely the most important feature you'll need to include in your tool is localization. Adding locale is optional but strongly encouraged.
Locale files are structured in Single Language Format and named as Name-locale_REGION.json
e.g. English-en_US.json
.
// index.js;;; 'awesomeTool' localeDir: pathContainer;
Then in your component (or API) you'll have access to localization tools.
// Container.jsComponent { const translate currentLanguage = thisprops; return ; // returns "Hello" in the correct language }
NOTE: when using locale, if the selected langauge in tC core is not supported by the tool, it will first try the system locale as a fallback then finally English.
Reducer
If you would like to utilize Redux in your tool you can give it to connectTool
. Then you can use the standard connect
HOC from react-redux
to subscribe to the store.
// index.js;;; 'awesomeTool' reducer: reducerContainer;
Then your reducer state will be available under state.tool
.
// Container.js;Component { const myValue = thisprops; return myValue; } const mapStateToProps = { const tool: myValue = state; return myValue ;};mapStateToPropsContainer;
Middleware
The tool already comes configured with the following middleware:
- redux-promise
- redux-thunk
- redux-logger (when
NODE_ENV=development
)
If you need to add additional middleware you can give it to connectTool
.
NOTE: middleware will be useless without a reducer for obvious reasons.
// index.js;;;; 'awesomeTool' reducer middlewares: Container;
Tool API
If other tools need access to functionality or data within this tool you can expose an API.
// index.js;;; 'awesomeTool' api: Container;
For more information about APIs see Tool API.
Other Features
Error Boundary (Deprecated)
A semi-user-friendly error screen is displayed if an error occurs within the tool. This allows users to navigate to a safe part of the app.