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

generator-ivh-react-component

v0.10.2

Published

iVantage flavored components for React

Downloads

8

Readme

generator-ivh-react-component NPM version Dependency Status

iVantage flavored components for React.

Installation

First, install Yeoman and generator-ivh-react-component using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-ivh-react-component

Then generate your new project:

yo ivh-react-component

Later, you can update your component to take advantage of changes made to this generator:

yo ivh-react-component:update

Note that this will try to

Now go forth and build components.

What's in the Box

A minimal yet featureful boilerplate for building React components.

  • Bundling with webpack
  • Testing with Jest and Enzyme
  • Test coverage a la Jest
  • ES6 transpilation with iVantage presets

Packages Explained

There's nothing worse than having a brand new boilerplate project dumped in your lap with a ten mile long list of dependencies and no explanation for how things tie together. We've done our best to keep things minimal while hitting all the required features. This section provides a brief explanation (and justification) of the included packages.

We use the babel transpiler to turn es6 (es2015) JavaScript and JSX into JavaScript of today. The various babale plugins unluck different features for us.

  • "babel-core"
  • "babel-preset-react-app"
  • "babel-plugin-transform-es2015-modules-commonjs"

Jest is our test runner, it provides code coverage reports and interactive test running capabilities. Enzyme is a special library with some handy utilities for testing with React elements.

  • "enzyme"
  • "eslint"
  • "eslint-config-ivantage"
  • "eslint-plugin-react"
  • "jest"

This is a react component afterall. We need the library itself as well as some helpers which allow us to run tests and render elements.

  • "react"
  • "react-addons-shallow-compare"
  • "react-addons-test-utils"
  • "react-dom"

We use postcss to add some post-processing steps to our css. For example, autoprefixer adds vendor specific prefixes to your css automatically and as needed. You may optionally include include support for importing scss files via node-sass.

  • "autoprefixer"
  • "postcss-custom-properties"
  • "node-sass"

Webpack is responsible for bundling all our code together and resolving any require and imports. Pretty much any module that ends in -loader is around to let webpack correctly load and package up files. Note that the sass-loader is only optionally included.

  • "webpack"
  • "babel-loader"
  • "postcss-loader"
  • "css-loader"
  • "sass-loader"
  • "style-loader"

Like a cross platform rm -rf, rimraf is just around to make cleaning old build artifacts easy. Similarly cross-env let's us set environment variables for our scripts in a way that isn't platform dependent.

  • "rimraf"
  • "cross-env"

Package Versions

Package versions will be kept in sync with create-react-app where they overlap. This is done to maximize hoisting in monorepo workflows.

License

MIT © iVantage Health Analytics, LLC