This package contains a few reusable components and helpers built around Material Design, and using
the React material-ui
library. It is useful for React projects
that use Material Design, Redux and
React Router.
Material-Design-like confirmation & acknowledgement components, alongside a Redux setup that allows to dispatch actions to show these dialogs and alerts, and keeping the necessary state in the global redux store.
The modal
module also serves the general purpose of dispatching actions to show any modal, beyond
the built-in ones for confirmation and alert.
Link and dropdown menu components that are compatible with React Router out of the box, rendering links that play well with the router, instead of trigerring a full page reload. The dropdown menu component also deals internally with the close/open state of the dropdown, so you don't have to.
A couple of complex form input components that we extracted from the original app in which we created them, and that may be useful elsewhere.
A few other components that don't fit in a single category, and that either abstract away even more
the details and boilerplate code needed to use some material-ui components out of the box, or else
provide some other benefit. Check out all the modules inside the
components directory. Ideally
component folder includes a README
with meaningful documentation, usage examples, etc. Please
forgive us if that's not the case. Let us know by opening an issue, or better yet, a pull request.
This project features a storybook, or living guide, of some of the components listed above. You can launch it with the following command:
yarn storybook
Then visit http://localhost:9009 and play around. This is useful both as a documentation of what exists, or an aid when developing on any of the existing or new components, without having an actual app with UI on which to test and play around.
This project is very young, and it may well be that the provided components have bugs, or are not easily usable or reusable. We also welcome proposals of new components that could be useful to include in this library. And last but not least, proposals about how to better organize the code in the library, or about all the build setup and configuration, as well as of the dev tools we're using are also more than welcome. Issues and pull requests are welcome.