@heroku/react-hk-components2.10.0 • Public • Published
React HK Components
Reusable React components. A sister library of ember-hk-components.
yarn add @heroku/react-hk-components
If you want to use
HKFlagIcon, you will need to tell Webpack to copy the flag images into a directory that is served up by your app:
// somewhere in your webpack config...plugins:from: 'node_modules/@heroku/react-hk-components/dist/flags'to: 'flags' // this is relative to your the outputPath you configured in webpack
<HKFlagIcon> defaults to loading the flag images from
/static/dist/flags, but if you have a different base path to the flag images, you'll need to pass it as a prop like
<HKFlagIcon basePath='/foo/bar/flags' region='europe' />.
See react-hk-components.herokuapp.com for a complete list of components that are available.
The HKModal component displays modal dialogs of two kinds: normal, which appear in the middle of the browser viewport, and flyout, which slides in from the right. It takes the following props:
boolean?. Defaults to false.
boolean. Set it to
truein order to trigger display of the modal, or
falseto trigger hiding.
string?. Set to
destructiveif you want the title of the modal to be rendered in red.
(value?: string) => any. A handler that is invoked with the close value when the modal is dismissed. Closing the modal by clicking outside the modal or by clicking on the X at the top-right of the modal will result in the handler being invoked with a value of
header: JSX element. What is rendered in the header of the modal.
IButtonDefinition?: an optional array of button definitions. These will be rendered left-to-right as buttons in the footer of the modal.
The contents of the modal are the children passed in the body of the react element, e.g.
<HKModal> stuff to render in body of modal </HKModal>
Buttons are defined as follows:
string. The text on the button
Button.Type. Primary, secondary, danger, etc.
boolean. Set to
trueif you want the button disabled.
string. The value associated with the button. This is what will be remitted to the
onDismisshandler when the user closes the modal by clicking on this button.
So here's a working example:
The HKDropdown component consists of a HKButton that toggles the display of it's dropdown contents. It takes the following props:
Align?. Aligns dropdown menu anchoring left or right side of dropdown button. Options are
right. Defaults to
string?. Styling for the dropdown button.
boolean?. Specifies whether the dropdown menu should toggle to close after clicking inside the dropdown menu. Defaults to
string?. Styling for the dropdown menu.
boolean?: disables the button from toggling the dropdown menu. Defaults to
string?: name of the dropdown, used for testing for
data-testid. Defaults to
string?: The title of the dropdown button.
The contents of the dropdown menu are the children passed in the body of the react element, e.g.
<HKDropdown> stuff to render inside dropdown menu </HKDropdown>
Best practices for content in dropdown menu:
- Each dropdown menu item should have the class
- Thematic breaks between elements (i.e. separators) should be used with
<li className='hk-dropdown-divider' />
- Dangerous menu items should have the class
Refer to the stories for examples.
git clone https://github.com/heroku/react-hk-components
- Visit your app at http://localhost:9001.
Local Usage in Another Application
The demo app is useful for developing this addon, but it can often be
helpful to consume your version of this addon in another application
either to more easily develop your changes or to validate that your
changes work as you expect. You can use your local version of
react-hk-components in another application that consumes it via
yarn's link command.
# in your react-hk-components directory$ yarn link# in your consuming app directory$ yarn link @heroku/react-hk-components# You will need to re-run yarn in your consuming app directory and restart your app$ yarn
You can check the success of linking in your consuming app
ls -l node_modules/@heroku/react-hk-components
which should return a symlink to your development copy of rhkc
Now, when you make changes in your copy of
changes will be reflected in the consuming application.
Caveats when linking - you will need to rebuild each time you want to see
changes in your consuming app directory.
To simplify, you can install watch or a similar tool and run
watch 'yarn run build' src in
This will rebuild the bundled version that your consuming app directory
pulls in whenever you make changes in rhkc.
Remember to unlink rhkc once finished.
This repo can be deployed to Heroku as a demo app using Storybook.
heroku create# ensure that heroku installs the dev dependency storybookheroku config:set NPM_CONFIG_PRODUCTION=falsegit push heroku master
Setup (one time)
npglobally using npm:
npm install -g np
rm -rf node_modules
yarn test. No errors? Lovely, proceed.
- When you're ready to publish,