Code4Romania React Reusable Components

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

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

Development

Install dependencies

npm install

(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

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  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 contact@code4.ro

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 contact@code4.ro.

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.

code4romania / reusable-components

readme