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

@eyecuelab/react-common

v0.33.19

Published

EyeCue Lab shared React components and utilities

Downloads

88

Readme

@eyecuelab/react-common

This is a library of React components and utilities, shared across EyeCue Lab projects.
Check out the documentation!

Usage

npm install --save @eyecuelab/react-common

Contributing

So, we are just starting off here, but these are some initial thoughts on coding standards. These will likely evolve as we continue to build out the library and learn things and discover patterns and all that good stuff.

General thoughts

  • Components should be written as functional components using hooks for state management, lifecycle hooks, etc. (checkout the docs for a refresher)
  • Styling should be done entirely with Styled Components (docs).
  • Including prop types is a must. It makes understanding and documenting components so much easier. (docs)

Documentation

Each component should have a dedicted storybook story showing off it's capabilities. These should be written in the component story format (docs).

Testing

  • Jest (docs)
  • React Testing Library (docs)
  • React Hooks Testing Library (docs)

Publishing

This project uses Semantic Versioning (website). And don't you forget it.

To publish a new version, make sure to update CHANGELOG.md and then run:

npm run release

This will allow to select an update type (major, minor, patch, etc.) and will update the version in package.json. You do not need to update package.json by hand.

Linking to local projects

Firstly, add the following aliases to the webpack config of the parent project:

alias: {
  react: path.resolve(__dirname, 'node_modules', 'react'),
  'react-dom': path.resolve(__dirname, 'node_modules', 'react-dom'),
  'styled-components': path.resolve(__dirname, 'node_modules', 'styled-components'),
},

The exact place this needs to go might differ by project, but for craco-powered projects this should go in the webpack section of the craco.config.js file. Basically when developing locally these libraries will exist in both react-common's node_modules and the parent project's node_modules. By providing these aliases to the parent project, it will always use its own local version of these modules, avoiding conflicts.

Next, run npm run link-dist or npm link ./dist in the root directory of react-common.

Finally run npm link @eyecue/react-common in the root directory of the parent project.

That's it! The parent project will now look at your local version of react-common. You can run npm run dev in the react-common directory to watch for changes and automatically rebuild (and those changes will show up in the parent project!). Be sure to keep in mind that any time you re-run npm install for the parent project, the link will be broken in favor of installing the deployed version of react-common, so you will need to re-run npm link @eyecue/react-common.