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

a-react-library

v1.0.15

Published

A placeholder for making open source react components/library

Downloads

20

Readme

a-react-library

npm_version license

A placeholder for making open source react components/library



Overview

Installation

npm install a-react-library

Usage


import { MyComponent } from 'my-component';

// ...

<MyComponent myProp="myValue" />

Props API

MyComponent

A component example

| Property | Type | Required | Default value | Description | |-----|-----|-----|-----|:-----| |myProp|string|yes||A random prop|


Developers

Development

You should use YARN for development as NPM seems to be causing some issues! (Using NPM for just installing and using as a component is OK)

Demo app

  • yarn start for live-testing the demo app

Storybook

  • yarn storybook for live-testing the storybook app

GitHub Page

  • yarn github-page for testing a temporary build of the full github-page without an possible theme that you will choose later on GitHub (no live-testing)

Prod

Generate Readme.md

  • yarn generate-readme

Will generate a readme according to your package.json info and the following files :

    • setup_readme.md (if not present, it will use the default npm i YOUR_PACKAGE_NAME)
    • usage_readme.md
    • dev_readme.md

You can then edit your readme.md file if you need to before building/publishing/deploying

NPM

  • yarn publish

Will transpile and publish to npm, it will prompt you the version incrementing.

GitHub Page

  • yarn build

Will build the static demo and storybook apps for prod into the build folder

  • yarn deploy-github-page

Will deploy the built apps from 'build' folder to the 'gh-pages' github branch

Helper scripts

  • yarn build-and-deploy This helper script will call all the scripts for a complete GitHub building and deploying (yarn build && yarn deploy-github-page)
  • yarn publish-build-and-deploy This helper script will call all the scripts for a complete NPM and GitHub transpiling/building and publishing/deploying (yarn publish && yarn build-and-deploy)

You should then commit and push sources on GitHub the usual way.

This document was generated by the Create React Readme v1.0.7.