react-components
Collection of React components
Install
Install with npm:
npm install --save @dfds-ui/react-components
Install with yarn:
yarn add @dfds-ui/react-components
Development
Naming conventions
| Prop | Values | Description |
|---|---|---|
| Size | small, medium, large | Use Size when a prop controls the size of the component. Use t-shirt styles for values. |
| Align | left, right, center | Use Align when a prop controls the horizontal alignment of the component |
| Orientation | horizontal, vertical | Use Orientation when a prop control the direction the component (or children) will expand |
| Variation | (what makes sense) | Use Variation when a component supports different variations. |
Using yarn link when developing
A common problem when using yarn link is that you end of with multiple versions of packages (eg. react). This is
because dependencies are resolved upwards from within the symlinked react-components folder.
webpack
If you are using webpack you can try setting resolve.symlinks to false in your webpack.config.js to only resolve
dependencies from the apps node_modules folder.
Gatsby
Gatsby uses webpack under the hood, so in order to set resolve.symlinks add the following to the gatsby-node.js file
exports.onCreateWebpackConfig = ({ getConfig, actions, stage }) => {
const config = getConfig()
config.resolve.symlinks = false
actions.replaceWebpackConfig(config)
}