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.
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
Frontend framework
Package managers
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 <!--!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 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.