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

@code4ro/reusable-components

v0.1.57

Published

Component library for code4ro

Downloads

72

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

code4rocode4ro

Keywords

code4roreactreact-component

Readme

Code4Romania React Reusable Components

GitHub contributors GitHub last commit License: MPL 2.0

The aim of the project is to publish a distribution of reusable frontend components that can be imported, customized and used in any Code4Romania project that would require them.

See the project live

As part of our ongoing development, we discovered that it is a lot simpler to develop frontend components that we can later customize and import in other projects, rather then reinventing and redeveloping the same components all over again in every project. This also helps us to aim for the same look and feel across projects.

Contributing | Built with | Repos and projects | Development | Feedback | License | About Code4Ro

Contributing

This project is built by amazing volunteers and you can be one of them! Here's a list of ways in which you can contribute to this project. If you want to make any change to this repository, please make a fork first.

Help us out by testing this project in the staging environment. If you see something that doesn't quite work the way you expect it to, open an Issue. Make sure to describe what you expect to happen and what is actually happening in detail.

If you would like to suggest new functionality, open an Issue and mark it as a [Feature request]. Please be specific about why you think this functionality will be of use. If you can, please include some visual description of what you would like the UI to look like, if you are suggesting new UI elements.

Built With

Programming languages

TypeScript

Frontend framework

ReactJS

Package managers

npm

Development

  1. Install dependencies
npm install
  1. (optional) Add a Here Maps API Key to your environment

In order for components that require maps to work, get an API key by signing up at https://developer.here.com, then add it to your env vars or to .env:

echo "STORYBOOK_HEREMAPS_API_KEY=your-api-key-goes-here" >> .env
  1. Run storybook
npm run-script storybook

Preview environments available automatically on each PR powered by Vercel. Preview environment for master branch: https://reusable-components-peach.vercel.app/

Usage

CSS and theming

All the components in this repo are themed using CSS Modules. In case you need to override any component's styles, pass the classes prop to any component individually or pass a theme to a <ThemeProvider>. See theme.tsx for more details.

CSS injection order

By default, CSS for these components is injected at the end of <head>. In case you want to override the CSS rules of this library, you might want to inject them earlier (before your own CSS). To do that, add a <!--!code4ro-style-inject--> comment to your <head> where you want this library to inject its CSS.

Here Maps API key

When using components that contain maps, you'll need to provide a Here Maps API key:

<HereMapsAPIKeyProvider value="yourAPIKeyHere">
  {/*...*/}
</HereMapsAPIKeyProvider>

Feedback

  • Request a new feature on GitHub.
  • Vote for popular feature requests.
  • File a bug in GitHub Issues.
  • Email us with other feedback [email protected]

License

This project is licensed under the MPL 2.0 License - see the LICENSE file for details

About Code4Ro

Started in 2016, Code for Romania is a civic tech NGO, official member of the Code for All network. We have a community of over 500 volunteers (developers, ux/ui, communications, data scientists, graphic designers, devops, it security and more) who work pro-bono for developing digital solutions to solve social problems. #techforsocialgood. If you want to learn more details about our projects visit our site or if you want to talk to one of our staff members, please e-mail us at [email protected].

Last, but not least, we rely on donations to ensure the infrastructure, logistics and management of our community that is widely spread across 11 timezones, coding for social change to make Romania and the world a better place. If you want to support us, you can do it here.