Skip to main content
react-md
Blog

The latest news about react-md

react-md 2.5.3

01/12/2021 (8 days ago)

Bug Fixes
  • @react-md/form: fixed floating label behavior for TextArea (80c22ba), closes #1043
  • @react-md/layout: Fixed scrollIntoView behavior for the layout tree (4716c76)

react-md 2.5.2

01/11/2021 (9 days ago)

Bug Fixes
  • docs: fixed some a11y issues in documentation site (6fee23c)
  • @react-md/form: Added missing containerProps to TextArea (695fd2a)
  • @react-md/form: Fixed floating state for controlled text fields (338d768), closes #1043

react-md 2.5.1

12/16/2020 (35 days ago)

Bug Fixes
  • @react-md/list: fixed list icon spacing to work with sass (369c206), closes #1015

react-md 2.5.0

12/15/2020 (36 days ago)

This release was mainly focused on the form package and added a lot of new features. I highly recommend checking out the following PRs for more information:

  • Simple form validation using the Constraint API with useTextField #1009
  • Better number handling with useNumberField #1014
  • Slider component #1016
Features
  • @react-md/form: added a new useTextField hook to validate the TextField and TextArea values (578257c)
  • @react-md/form: added a number-recommended type for validation (18c772e)
  • @react-md/form: added a PasswordWithMessage component to be used with useTextField Hook (f6d84f2)
  • @react-md/form: added a TextAreaWithMessage component to be used with useTextField Hook (e358799)
  • @react-md/form: added a TextFieldWithMessage component to be used with useTextField Hook (f2d7e5d)
  • @react-md/form: added a useNumberField hook to control number field values (c705f2c)
  • @react-md/form: better defaults for validation (4003a07)
  • @react-md/icon: added an error icon to the IconProvider Component and useIcon Hook (4dfd50a)
  • @react-md/icon: added flexReverse prop to TextIconSpacing (c4ee05b)
  • @react-md/utils: added a withinRange util for number validation (e8fb252)
  • @react-md/utils: changed the default @include order for easier overrides (4705b09)
Bug Fixes
  • @react-md/form: better blur error cases for useNumberField (8b927ab)
  • @react-md/form: fixed FormMessage counter prop-type validation (9ece3e1)
  • @react-md/form: fixed messageProps error from react when disableMessage is enabled (e452aff)
  • @react-md/form: Floating Label for controlled value Invalid numbers (ef1d764)
  • @react-md/form: Maintain Floating Label for Invalid Numbers (2443f9a)
  • @react-md/form: More fixes for number inputs being considered valued (1832e69)
  • @react-md/form: updated TextField PropTypes to allow for search input type (23d92dd)
  • utils: GridCell now correctly uses largeDesktop when desktop is also provided (fd26b8b)
  • @react-md/utils: nearest ensures min and max range for value (48181b3)
  • @react-md/utils: updated nearest to support a custom range for sliders (6cfc67e)

react-md 2.4.3

11/13/2020 (68 days ago)

Bug Fixes
  • @react-md/list: fixed ListItem disabled colors to optionally include addons (a40b6b3), closes #997
  • @react-md/list: ListItem no longer focusable by default when disabled (06e91ca), closes #997
Documentation

react-md 2.4.2

10/23/2020 (89 days ago)

Bug Fixes
  • @react-md/menu: fixed DropdownMenu not being able to provide style and className to Menu (7823fea), closes #989

react-md 2.4.1

10/17/2020 (95 days ago)

Republished the v2.4.0 release to ensure that all 2300 themes are available through CDNs after upgrading my build script.

react-md 2.4.0

10/17/2020 (95 days ago)

This release implemented better default behavior to ensure that the "better" contrast ratio is chosen instead of choosing the first color that meets the minimal contrast ratio. This is enabled by default going forward, but can be disabled by setting $rmd-theme-better-contrast-ratios: false

Bug Fixes
  • @react-md/table: table border color uses hex values to fix chrome colSpan rendering issue #982 (2138284)
Features
  • @react-md/theme: Better Contrast Colors by Default and dev-utils refactor #955 (519b128)
Documentation
  • the documentation site now allows for code examples and sandboxes to conditionally use JavaScript instead of TypeScript

react-md 2.3.1

09/14/2020 (128 days ago)

I released v1.18.0 today but didn't realize that npm uses --tag while lerna uses --dist-tag so v1.18.0 was released under latest instead of previous. This release is only to ensure that v2 is set to latest and has no other changes.

react-md 2.3.0

09/10/2020 (132 days ago)

This release is kind of a breaking change since the base react-md package no longer has a dist/css folder for all the pre-compiled themes due to CDNs and package managers rejecting this package for being too big. All the pre-compiled themes will now be available through jsDelivr instead. Check out the CDN Links for more info.

This release also changed the ResizeObserver to use a subscription model to slightly increase performance when multiple ResizeObservers are used on a single page as well as fix some errors related to the ResizeObserver loop has been exceeded. The useResizeObserver has been updated to use the new API which requires refs, but is still backwards compatible. Due to this change, the ResizeObserver component has been deprecated in favor of the useResizeObserver hook implementation.

Otherwise, there were a few new features added to the @react-md/button, @react-md/progress, and @react-md/tree packages that you can reference below.

Documentation
  • created a new example for the @react-md/form package to show how to use react-hook-form with react-md for form validation. Check out the new example here.
  • updated sandboxes to use new CDN for pre-compiled themes (e83f47e)
  • added documentation about using CDN Links
  • added a simple umd example to show CDN usage (ed6b62e)
Bug Fixes
  • @react-md/form: added missing scss variables (ec8d675)
  • @react-md/states: fixed usePressedStates to pass onClick like other state hooks (82cd676)
Features
  • @react-md/alert: created and exported the default timeout and classnames (32bacc9)
  • @react-md/button: added built-in support for rendering CircularProgress (c6c616b)
  • @react-md/button: added support for disabled theme without disabling button (6a647e2)
  • @react-md/form: updated TextArea to use the new useResizeObserver API (2c2dd27)
  • @react-md/overlay: created and exported the default timeout and classnames (48cd9d5)
  • @react-md/progress: added a small state to the CircularProgress (6884a3a)
  • @react-md/tabs: updated tabs to use the new resize observer API (052b3f2)
  • @react-md/tree: updated defaultTreeItemRenderer for class names (3c61f3c), closes #920
  • @react-md/utils: improved LabelRequiredForA11y type definition (b7aa4fa)
  • @react-md/utils: added Dir component to help determine current writing direction (a929e04)
  • @react-md/utils: added useGridList hook (56ecc19)
  • @react-md/utils: added useIsomorphicLayoutEffect from react-redux (deacf1c)
  • @react-md/utils: created a new useResizeObserver implementation (dc3f4df)
  • @react-md/utils: more verbose useAppSize usage error message (2c81982)
  • @react-md/utils: added hook to access grid list size (a448816)
  • @react-md/utils: added new cloneStyles prop so grid styles can be applied to any child (ca913e7)

react-md 2.2.2

09/02/2020 (140 days ago)

This release was a re-publish of v2.2.0 attempting to fix a publishing error. Unfortunately, the base react-md package had to drop support for the pre-compiled themes and now need use jsDelivr instead.

Check out the new CDN Links for more info.

react-md 2.2.1

09/02/2020 (140 days ago)

This release was just a re-publish of v2.2.0 to try fixing a publishing error.

react-md 2.2.0

08/11/2020 (162 days ago)

Bug Fixes
  • @react-md/form: Listbox render 0 as a valid display value (d02b7a9)
Features
  • @react-md/avatar: Added ability to pass props to <img> (11848ee), closes #908
  • @react-md/form: Added props to style Checkbox and Radio input element (b6d2318)
  • @react-md/form: Updated toggle inactive and active colors to be configurable (49319e6)

Note: The Checkbox and Radio components have updated their default inactive color to be the rmd-theme-var(text-secondary-on-background) instead of rmd-theme-var(secondary) to better match the v1 styles.

See $rmd-toggle-inactive-color and $rmd-toggle-active-color.

react-md 2.1.2

08/01/2020 (172 days ago)

This release was mostly internal changes and documentation updates including a new Writing Tests guide, but also fixed the Layout component to allow for the useCrossFade hook to transition the <main> content on pathname changes.

Bug Fixes
  • @react-md/transition: useCSSTransition now correctly forwards refs (36f832f)

Added Examples Folder

07/28/2020 (176 days ago)

The GitHub repo has been updated to now include an examples folder to show how you can use react-md along with other build tools such as Create React App, Next.js, Gatsby, and others. These examples can be used to spin up boilerplate projects by following the following steps:

First download the specific example:

# replace EXAMPLE_NAME with the specific example you want to use
curl https://codeload.github.com/mlaursen/react-md/tar.gz/main | tar -xz --strip=2 react-md-main/examples/EXAMPLE_NAME
cd EXAMPLE_NAME

Next, install any dependencies:

npm install
# or with yarn
yarn

Next, initialize the git repository and add the first commit:

git init
git add .
git commit -m "Initial commit"

Finally, follow any instructions in the README.md about how to run the specific example.

react-md 2.1.1

07/21/2020 (183 days ago)

Bug Fixes
  • theme: Fixed rmd-theme-get-swatch to loop over all rmd-theme-colors instead of the primaries only (353de23), closes #884

react-md 2.1.0

07/11/2020 (193 days ago)

This release added a new and improved dark mode that can be used by enabling a new $rmd-theme-dark-mode-elevation variable.

Bug Fixes
  • AppBar text color now defaults to rmd-theme-var(text-primary-on-background) (2c3ea5e)
  • Booleans in dist/scssVariables (f6d43a3)
  • ListItem disabled states (7b37292)
  • Scroll active element into view while focusing (a9a0902)
  • Tree focused index after expanding all with asterisk (8547629)
  • Tree keyboard movement for child items that are expanded (fadddc7)
  • Tree scrolling elements into view (eef48dc)
Features
  • Added new mixin for optional css-modules (28ba828)
  • Exported the useAutoComplete hook (cac5cd1)
  • Improved Dark Mode using Raising Elevation (547877c), closes #860
  • Render non-searchable items in AutoComplete (e7a82ac)
Read More

react-md 2.0.4

07/10/2020 (194 days ago)

This is a very small release that just fixed adding @react-md/form as a dependency to @react-md/layout (e83b296)

react-md 2.0.3

07/07/2020 (197 days ago)

This release fixed a few styling issues for the @react-md/form package and correctly passing the disabled prop to the TextField's <input> element:

  • form: Select disabled styling (d79d007)
  • form: TextArea disabled styles (ef118bf)
  • form: TextField and Select disabled behavior (e8f2c57)

react-md 2.0.2

06/30/2020 (204 days ago)

This release focused on fixing bundle sizes with webpack as well as increasing build performance with the sideEffects field for each package.json. For more information, check out the v2.0.2 release PR #877 which goes into details about build time and sizing changes.

This release also includes the following changes:

Read More

react-md 2.0.1

06/17/2020 (217 days ago)

This is technically a breaking change for the UMD bundle since this splits the material-icon component wrappers into separate bundles to minimize the library's size. I'm going with a patch bump though since it's only been two days since the v2 release and it's highly doubtful that consumers of the library have fully upgraded to v2 or even using the UMD bundle to begin with.

react-md will now be available as these bundles:

The advanced installation guide and the library size notes have been updated for this information.

react-md 2.0.0

06/15/2020 (219 days ago)

The v2 release is a complete re-write of react-md to address the majority of problems encountered while using v1. Unfortunately, this took a lot longer than I had hoped since I ended up using this project to learn Typescript as well as the new React hooks API. Even though there are some missing components from v1, I think the new functionality outweighs it and the components are scoped for a later release.

The 2.0.0 release of react-md features:

Read More