npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tc-tool

v4.1.0

Published

A HOC that provides a tool interface with tC core

Downloads

159

Readme

Build Status codecov

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
import Container from './Container';
import {connectTool} from 'tc-tool';

export default connectTool('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
import Container from './Container';
import {connectTool} from 'tc-tool';
import path from 'path';

export default connectTool('awesomeTool', {
    localeDir: path.join(__dirname, './locale')
})(Container);

Then in your component (or API) you'll have access to localization tools.

// Container.js
class Container extends React.Component {
    render() {
        const {translate, currentLanguage} = this.props;
        return translate('hello'); // 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
import Container from './Container';
import {connectTool} from 'tc-tool';
import reducer from './reducers';

export default connectTool('awesomeTool', {
	reducer: reducer
})(Container);

Then your reducer state will be available under state.tool.

// Container.js
import connect from 'react-redux';
class Container extends React.Component {
  render() {
    const {myValue} = this.props;
    return myValue;
  }
}

const mapStateToProps = (state) => {
    const {tool: {myValue}} = state;
    return {
        myValue
    };
};
export default connect(mapStateToProps)(Container);

Middleware

The tool already comes configured with the following middleware:

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
import Container from './Container';
import {connectTool} from 'tc-tool';
import reducer from './reducers';
import {createLogicMiddleware} from 'redux-logic';

export default connectTool('awesomeTool', {
	reducer,
    middlewares: [createLogicMiddleware()]
})(Container);

Tool API

If other tools need access to functionality or data within this tool you can expose an API.

// index.js
import Container from './Container';
import {connectTool} from 'tc-tool';
import MyApi from './MyApi';

export default connectTool('awesomeTool', {
	api: new MyApi(),
})(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.