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

react-module-krabos-1

v1.0.0

Published

A template for creating a reusable [React](http://facebook.github.io/react) module which will be published to npm and also provide a browser bundle which exports a single global variable.

Downloads

3

Readme

Reusable React module

A template for creating a reusable React module which will be published to npm and also provide a browser bundle which exports a single global variable.

Download and extract, then install dependencies:

npm install

package.json settings

The build script requires the following to be set up in package.json:

  • name - used as the browser bundle filename and in its header comment
  • standalone - global variable name exported from the browser bundle
  • main - entry point for the module; default is './lib/index.js'
  • version - default is '1.0.0'
  • homepage - used in the browser bundle header comment
  • license - used in the browser bundle header comment; default is 'MIT' (a template MIT LICENSE.md file is also included)

The build script expects to find JSHint config in ./.jshintrc, so a default is provided - drop your own in, though! It's worth taking a few minutes to set one up as per your preferences if you don't already have one, promise!

React is configured as a peer dependency to avoid silently pulling in multiple versions of React if there's a mismatch with the version expected by your module and any project it's being used in.

Default browserify-shim config is set up to shim both require('react') and require('react/addons') to a global React variable in the browser bundle. If you have other dependencies which ship browser global versions, add them in here in the same manner.

Directory structure

CommonJS source code (which may use JSX and ES6 transforms supported by react-tools) lives in src/.

JavaScript is transpiled from src/ into lib/ - this is what will get published to npm if you run npm publish.

The entry point for the module is expected to be ./lib/index.js - this is set up as the default in package.json.

.gitignore is preconfigured to ignore lib/ and node_modules/

.npmignore is preconfigured to ignore almost everything except lib/.

npm scripts

npm run watch - watch src/, transpiling source code into lib/, linting and creating a browser bundle in dist/ on every change.

npm run debug - does the same as npm run watch but also includes a sourcemap in the browser bundle.

npm run dist - creates a release version of the browser bundle, writing both uncompressed .js and compressed .min.js versions to dist/.