# topcoder-react-utils
> Topcoder collection of generic ReactJS components and utils
Latest version **0.7.9** (published 2019-03-07) · MIT license · 0 weekly downloads
## Install
```sh
npm install topcoder-react-utils
pnpm add topcoder-react-utils
yarn add topcoder-react-utils
bun add topcoder-react-utils
```
Provides the command `topcoder-lib-setup`.
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.7.9 |
| Published | 2019-03-07 |
| First published | 2018-01-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | ~10.14.2 |
| Dependencies | 34 |
| Unpacked size | 525.4 KB |
| Known vulnerabilities | 0 (+18 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 8 |
| Maintainers | birdofpreyru |
| Keywords | Development, JavaScript, JS, React, ReactJS, Starting Pack, Tools, Topcoder, Utils, Web |
## Links
- npm: https://www.npmjs.com/package/topcoder-react-utils
- Repository: https://github.com/topcoder-platform/topcoder-react-utils
- Homepage: https://github.com/topcoder-platform/topcoder-react-utils#readme
- Issues: https://github.com/topcoder-platform/topcoder-react-utils/issues
- npm.io page: https://npm.io/package/topcoder-react-utils
## Dependencies (34)
- [raf](https://npm.io/package/raf.md) ^3.4.1
- [react](https://npm.io/package/react.md) ^16.7.0
- [redux](https://npm.io/package/redux.md) ^4.0.1
- [config](https://npm.io/package/config.md) ^3.0.1
- [helmet](https://npm.io/package/helmet.md) ^3.15.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [moment](https://npm.io/package/moment.md) ^2.23.0
- [morgan](https://npm.io/package/morgan.md) ^1.9.1
- [express](https://npm.io/package/express.md) ^4.16.4
- [shortid](https://npm.io/package/shortid.md) ^2.2.14
- [cross-env](https://npm.io/package/cross-env.md) ^5.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.7.0
- [url-parse](https://npm.io/package/url-parse.md) ^1.4.4
- [node-forge](https://npm.io/package/node-forge.md) ^0.7.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [request-ip](https://npm.io/package/request-ip.md) ^2.1.3
- [body-parser](https://npm.io/package/body-parser.md) ^1.18.3
- [compression](https://npm.io/package/compression.md) ^1.7.3
- [react-redux](https://npm.io/package/react-redux.md) ^6.0.0
- [react-helmet](https://npm.io/package/react-helmet.md) ^5.2.0
- [cookie-parser](https://npm.io/package/cookie-parser.md) ^1.4.3
- [redux-actions](https://npm.io/package/redux-actions.md) ^2.6.4
- [redux-promise](https://npm.io/package/redux-promise.md) ^0.6.0
- [serve-favicon](https://npm.io/package/serve-favicon.md) ^2.5.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.0.0
- [redux-devtools](https://npm.io/package/redux-devtools.md) ^3.5.0
- [@babel/register](https://npm.io/package/@babel/register.md) ^7.0.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.3.1
- [command-line-args](https://npm.io/package/command-line-args.md) ^5.0.2
- [command-line-usage](https://npm.io/package/command-line-usage.md) ^5.0.5
- [serialize-javascript](https://npm.io/package/serialize-javascript.md) ^1.6.0
- [react-css-super-themr](https://npm.io/package/react-css-super-themr.md) ^2.2.0
- [redux-devtools-log-monitor](https://npm.io/package/redux-devtools-log-monitor.md) ^1.4.0
- [redux-devtools-dock-monitor](https://npm.io/package/redux-devtools-dock-monitor.md) ^1.1.3
## Alternatives
- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads
## Recent versions
- 0.7.9 (latest) — 2019-03-07
- 0.7.8-2 (qa-accessibility) — 2019-07-30
- 0.9.2 — 2019-03-07
- 0.9.1 — 2018-12-25
- 0.9.0 — 2018-12-25
- 0.7.8 — 2018-09-06
- 0.7.7 — 2018-09-06
- 0.8.1 — 2018-08-26
- 0.7.6 — 2018-08-16
- 0.8.0 — 2018-08-06
- 0.7.5 — 2018-08-06
- 0.7.4 — 2018-07-18
- 0.7.3 — 2018-07-18
- 0.7.2 — 2018-07-18
- 0.7.1 — 2018-07-18
- … 83 more at https://npm.io/package/topcoder-react-utils/versions
## README
# Topcoder React Utils
The [Topcoder](https://www.topcoder.com) collection of generic ReactJS
configurations, components and utilities to be shared between all internal and
external ReactJS projects developed by the Topcoder community.
## Content
- [Installation](#installation)
- [Reference](#reference)
- [Configurations](#configurations)
- [Components](#components)
- [NodeJS Scripts](#nodejs-scripts)
- [Redux Templates](#redux-templates)
- [Utilities](#utilities)
- [Development](#development)
- [Local Testing of Library Updates within a Host Project](#local-testing-of-library-updates-within-a-host-project)
- [Library Releases to NPM](#library-releases-to-npm)
- [License](#license)
## Installation
Install the package as
```bash
$ npm install --save topcoder-react-utils
$ ./node_modules/.bin/topcoder-lib-setup
```
Then import the global stylesheet into the root ReactJS component of your app:
```jsx
/* eslint-disable global-require */
if (process.env.NODE_ENV === 'production') {
require('topcoder-react-utils/dist/prod/style.css');
} else {
require('topcoder-react-utils/dist/dev/style.css');
}
/* eslint-enable global-require */
```
To upgrade this library to the latest version just execute again
```bash
$ ./node_modules/.bin/topcoder-lib-setup
```
## Reference
### Configurations
- [**Babel Configurations**](docs/babel-config.md) – Standard
configurations for [Babel](https://babeljs.io/);
- [**ESLint Configurations**](docs/eslint-config.md) – Standard
configurations for [ESLint](https://eslint.org/);
- [**Jest Configurations**](docs/jest-config.md) – Standard configurations
for [Jest](https://facebook.github.io/jest/);
- [**Stylelint Configurations**](docs/stylelint-config.md) – Standard
configurations for [Stylelint](https://stylelint.io)
- [**Webpack Configurations**](docs/webpack-config.md) – Standard
configurations for [Webpack](https://webpack.js.org/).
### Components
- [**`Avatar`**](docs/avatar.md) – The standard component for user avatars;
- [**`Button`**](docs/button.md) – Handles buttons and button-like links
(components that look like regular buttons, but behave as links) in the same
uniform manner;
- [**`Link` and `NavLink`**](docs/link-and-navlink.md) – Auxiliary wrappers
around [React Router](https://github.com/ReactTraining/react-router)'s ``
and `` components; they help to handle external and internal links in
the same uniform manner;
- [**`Modal`**](docs/modal.md) – Themeable modal component;
- [**`ScalableRect`**](docs/scalable-rect.md) – Container that keeps
the specified aspect ratio regardless the width you set.
### NodeJS Scripts
- [**topcoder-lib-setup**](docs/topcoder-lib-setup-script.md) – Helps to
install and upgrade **topcoder-react-utils** and other similar libraries.
### Redux Templates
- [**Item**](docs/redux-item.md) – An async piece of data in Redux store.
### Utilities
- [**Client**](docs/client.md) – Client-side initialization code.
- [**Config**](docs/config.md) – Isomorphic app config;
- [**Global Styles**](docs/global-styles.md) – Global styles necessary for
a generic application;
- [**Isomorphy**](docs/isomorphy-utils.md) – Collection of helpers to deal
with isomorphic aspects of the code;
- [**Jest utils**](docs/jest-utils.md) – Collection of helpers to be used
in Jest tests code;
- [**Redux utils**](docs/redux-utils.md) – *TO BE DOCUMENTED*
- [**SCSS Mixins**](docs/scss-mixins.md) – Collection of useful style
mixins;
- [**Server**](docs/server.md) – Easy creation and launch of web-server
with standard configuration, that serves a ReactJS application with or without
server-side rendering, supports development tools (Hop Module Reloading), and
can be further configured for the needs of specific projects.
- [**Webpack**](docs/webpack-utils.md) – Various utils related to the
Webpack bundling process.
## Development
Whenever you are to do any changes in the library, keep in mind the following:
- Different projects rely on this library, the tooling it provides should be as
generic and flexible as possible. When you change existing components, do your
best to keep backward compatibility of the updated components, any changes
that demand updates in the projects relying on the library, must be
documented in the [changelog](CHANGELOG.md).
- Rely on unit tests to verify your changes, and prevent regression. Update
existing unit tests to keep up with your changes, and add new unit tests
when necessary.
- For the final testing of your updates within a host project relying on this
lib, see the next section.
- The library use semantic versioning. In case your changes demand any changes
in the project relying on the library, you should release it as a minor
library update (more severe comparing to patch update). Consider to use
a new branch, called after the minor version, and to not merge your changes
into the main **develop** / **master** branches until everybody is prepared
for that.
### Local Testing of Library Updates within a Host Project
To locally test how your library updates work within a host project relying on
the lib (without releasing them to NPM), use
[`npm link`](https://docs.npmjs.com/cli/link.html) to link local copy of the lib
into the host project, then run `npm run build:dev:watch` in the library root to
automatically re-build the lib when you change it, and use the host project to
see the final effect of changes you make.
### Library Releases to NPM
Continious Integration and Delivery (CI/CD) is set up for this repository with
CircleCI 2.0. Commits to all branches trigger testing of the code with
`$ npm test` (it runs linters and unit tests), and also build the library.
CI/CD flow is interrupted in case of any problems.
To release updated library version to NPM do the following:
- Bump library version in `package.json` and `package-lock.json` by
`$ npm version UPDATE_TYPE --no-git-tag` command, where `UPDATE_TYPE` should
be one of `patch` / `minor` / `major` to update current version `x.y.z`
to `x.y.(z+1)` / `x.(y+1).0` / `(x+1).0.0`. The `--no-git-tag` flag prevents
automatic creation of the Git tag with the same name as the version.
- Tag the commit to be released with the git tag like `v0.1.2`, where `0.1.2` is
the new version set in the previous step.
- Commit the tag to GitHub repository.
## License
Topcoder React Utils is [MIT Licensed](LICENSE.md)
---
_Source: https://npm.io/package/topcoder-react-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._