Have ideas to improve npm?Join in the discussion! »

react-simple-widgetsTypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

react-simple-widgets

This is a collection of customizable widgets to help accelerate your React app development. These widgets perform commonly needed tasks within your app such as dialogs, flash messages, lists and more.

To find out if this library is right for you, we've compiled the storybook samples of all widgets in this library. Click here to test them out to seem if this library offers what you want before committing to installing it in your project.

Installing

yarn add -D react-simple-widgets

This libraries requires formik, react and react-router-dom as peer dependencies, so you need to have these installed in your application as well.

You can install these dependencies with yarn add -D react react-router-dom formik or npm i -D react react-router-dom formik

Migrating

See the migration guide on how to upgrade from v1 to v2 See the migration guide on how to upgrade from v2 to v3

Providers

Providers wrap around you app and provide globally accessible functionality to all parts of your app

  • DialogProvider - Provides a simple dialog framework within your app
  • ValueStoreProvider - Provides an in-memory value storage which can utilize the local storage API to persist data
  • FlashProvider - Provides a flash message framework built using the dialog framework
  • TransitionProvider - Provides a page transition framework for navigating between different pages of your app

Form

These are customized form widgets for creating Formik forms

Pickers

Pickers allow you to select some complex data type

  • FilePicker - A simple file picker which supports drag-and-drop feature
  • DatePicker - A date picker which supports single and multiple date selection as well as month selection
  • TimePicker - A 12-hour time picker

List

Widgets here operate on list data

  • ListView - A widget that displays a list of items in a responsive tabular form
  • ObjectView - A widget that renders an object's data in a tabular form

Misc

Widgets under this category are for convenience

  • Loader - A widget that displays a spinner
  • BusyButton - A button widget that displays a loading indicator if busy
  • ConfirmDialog - A widget which displays a confirmation dialog before calling an action
  • Breadcrumbs - A breadcrumb link container widget
  • PageActions - A div that displays a row of spaced buttons or nothing if no children are specified

Hooks

  • useQueryParams - A hook that returns a object containing the URL search string parameters
  • useLoadMore - A hook that provides methods and state variables to implement a load-more-items feature for a list of items that cannot be displayed in a ListView
  • useCountdown - A hook which provides numeric countdown functionality
  • useWindowBreakpoints - A hook which provides the window width category data according to Bootstrap's breakpoints

Utils

  • debounce - Creates a debounced function which is invoked after a specified delay after a caller has called it

Theming

The colors used by the widgets are controlled by CSS variables and you can customize them to suit your application's theme

CSS variable Description Default value
--rsw-label-color Controls the label color of field decorator #777777
--rsw-error-color Controls the error color of components indicating errors #ff5555
--rsw-primary-theme-color Controls the primary color used by all widgets #209d58
--rsw-secondary-theme-color Controls the secondary color used by all widgets #b3b3b3
--rsw-transition-duration Controls the duration of transitions used by all widgets 0.3s

The following variables are widget specific

CSS variable Description Default value
--rsw-date-picker-header-bg-color Controls the background color of the day label display in the DatePicker widget #209d5811
--rsw-field-decoration-label-bg-color Controls the background color of the label component of the FieldDecoration widget white
--rsw-select-field-indicator-size Controls the width and height of options in the SelectField widget 1.5rem
--rsw-dialog-view-vertical-margin Controls the top and bottom margins of dialogs created by the DialogProvider widget 1.2rem
--rsw-flash-view-error-theme-color Controls the theme color of error flash message dialogs created by the FlashProvider widget #ff5555
--rsw-flash-view-warning-theme-color Controls the theme color of warning flash message dialogs created by the FlashProvider widget #ffdd55
--rsw-flash-view-info-theme-color Controls the theme color of information flash message dialogs created by the FlashProvider widget #55ddff
--rsw-flash-view-success-theme-color Controls the theme color of success flash message dialogs created by the FlashProvider widget #7fff2a

Storybook samples

This library is built with Storybook and each widget has its own set of stories demonstrating use cases of the widget. When executed, Storybook will open a web page containing all the stories for you to interact with.

To execute the storybook, follow these steps:

  1. Clone the project from Github
  2. Run npm install to install the project dependencies
  3. Run npm run storybook

Maintainers

Support

If you'd like to support this project, you can do so by becoming a patreon on Patreon

It would be really helpful if you can star the project on Github

Changelog

View changelog

Install

npm i react-simple-widgets

DownloadsWeekly Downloads

52

Version

3.0.0

License

MIT

Unpacked Size

937 kB

Total Files

64

Last publish

Collaborators

  • avatar