2.0 Migration Guide
-
Importing components:
If you are using babel-plugin-grommet you can safely do:
import { Button } from 'grommet';
Otherwise import the component from its folder:
import Button from 'grommet/components/button';
-
Dependencies
If you are using
react-intl
, you will need to add a dependency for it. Grommet 2.0 does not includereact-intl
.
We will slowly add these as codesandbox references, and/or add the backward compatible component to grommet-v1 repo.
- Article
- Card
- Columns
- Footer
- Header
- Hero
- Section
- Sidebar
- Value
- Headline
- Label
- Quote
- Timestamp
- Title
- Pulse
- Legend
- Spinner - WIP, in the meanwhile you can use the svg example under Highlights
- Tiles, Tile
For more technical step by step examples of migrating components from v1 to v2 use this blog: Technical migration from grommet-v1 to grommet-v2 – grommet.io – Medium
Note that it's possible to run v1 and v2 side by side, and migrate the v1 components gradually while running v2.
Use v2 package.json
file to get the latest version numbers on the following versions:
- Run
yarn add grommetv2@npm:grommet@2.3.1 styled-components@4.1.3 polished@2.3.3 prop-types@15.6.2
- Manually update the
pacakge.json
in your v1 project to use thereact
andreact-dom
versions as mentioned on v2package.json
. - Fix "import {PropTypes} from React" statements since it is not part of the React library.
- Rest -> use fetch() directly
- App component has been renamed to Grommet
-
inline
prop has been removed -
centered
prop has been removed
-
appCentered
prop has been removed -
colorIndex
prop has been replaced withbackground
-
focusable
prop has been removed -
onClick
prop has been removed. Use Button instead -
separator
prop has been replaced withborder
-
size
prop has been removed. Usewidth
orheight
-
texture
prop has been replaced withbackground
-
textAlign
prop has been removed -
primary
prop has been removed -
full
prop has been removed. Usebasis
-
The default button now does not include react-router capabilities, you need to use RoutedButton if you were using
Button
with path prop.import { Button, RoutedButton } from 'grommet'; <Button label='Box' href='/box' plain={true} /> <RoutedButton label='Box' path='/box' plain={true} />
-
closer
has been removed. Now you should add your own close control in the body of the Layer. -
flush
has been removed. Layer now is always flushed. -
hidden
has been removed. Do not include Layer in your virtual DOM if you don't want it to show. -
peek
has been removed. -
onClose
has been renamed toonEsc
. This callback will only be invoked if the user presses the escape key.
-
placeHolder
has been replaced withplaceholder
-
showControls
has been replaced bycontrols
, which now allows placing controls over or below the player. -
align
,colorIndex
,full
, andsize
have all been removed. Usefit
and put inside aBox
. -
poster
,shareLink
,shareHeadline
,shareText
,title
have all been removed. Instead, use aStack
component and theonEnded
property to control any before and after play content. We have an example of this in thenext-sample
repository. -
allowFullScreen
has been removed, if controls are shown, it is always available. -
muted
has been renamedmute
.