Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/antonioru/beautiful-react-diagrams
💎 A collection of lightweight React components and hooks to build diagrams with ease 💎
https://github.com/antonioru/beautiful-react-diagrams
diagram diagrams flowchart-diagrams flowcharts hooks javascript react
Last synced: 11 days ago
JSON representation
💎 A collection of lightweight React components and hooks to build diagrams with ease 💎
- Host: GitHub
- URL: https://github.com/antonioru/beautiful-react-diagrams
- Owner: antonioru
- License: mit
- Created: 2020-03-10T22:39:43.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T09:06:30.000Z (almost 2 years ago)
- Last Synced: 2024-08-04T05:01:34.586Z (3 months ago)
- Topics: diagram, diagrams, flowchart-diagrams, flowcharts, hooks, javascript, react
- Language: JavaScript
- Homepage: https://antonioru.github.io/beautiful-react-diagrams/
- Size: 2.2 MB
- Stars: 2,656
- Watchers: 27
- Forks: 173
- Open Issues: 63
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://opensource.org/licenses/MIT)
[](https://coveralls.io/github/beautifulinteractions/beautiful-react-diagrams?branch=master)
A tiny collection of lightweight React components for building diagrams with ease
## 💡 Why?
Javascript diagramming libraries are often difficult to integrate in React projects.
Different patterns not always fit the React nature and having a component's state in in sync with an external
diagramming library might be quite difficult especially when the latter had been built in a different paradigm (such as MVC, for example).
For this reason we created `beautiful-react-diagrams` an easy-to-customise functional diagramming library to build
diagrams with ease.
## 🎓 Principles
- **Lightweights**: import nothing but a single lightweight javascript.
- **Controlled components**: exports [controlled](https://reactjs.org/docs/forms.html#controlled-components) components only.
- **Renderers**: the involved components can be easily replaced with your own by using the `renderer` props.
- **Easy to style**: built using CSS vars only.
## ☕️ Features
* Concise API
* Small and lightweight
* Easy to use
* Easy to customise
## Contributing
Contributions are very welcome and wanted.
To submit your custom pull request, please make sure your read our [CONTRIBUTING](./CONTRIBUTING.md) guidelines.
**Before submitting** a new pull request, please make sure:
1. You have updated the package.json version and reported your changes into the [CHANGELOG](./CHANGELOG.md) file
3. make sure you run `npm run lint`, `npm build` and then `npm test` before submitting your merge request.
4. make sure you've added the documentation of your changes.
5. if you've changed the signature of a component, please make sure you've updated the `index.d.ts` file.
## Versioning
This library follows the [semver](https://semver.org) versioning standard.
Pre-release commits on the `master` branch, including merge commits, lead
to automated publication to NPM under the `next` tag. Pre-release version
numbers must follow the `..-.`, such as
`5.1.0-rc.0`.
---
This library logo has been created using images published by the user [Freepik](https://www.flaticon.com/authors/freepik) on [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812)