And an Alert component, which imports the colour file and uses it to define the component's prop types:
// Alert.jsx
import React from 'react'
import t from 'prop-types'
import { colours, colourNames } from '../../style/colours'
export const Alert = ({ children, kind, ...rest }) => (
<div
style={{
padding: 20,
borderRadius: 3,
color: 'white',
background: colours[kind],
}}
{...rest}
>
{children}
</div>
)
Alert.propTypes = {
/**
* The kind prop is used to set the alert's background color
*/
kind: t.oneOf(colourNames),
}
Alert.defaultProps = {
kind: 'primary',
}
If I use <Props of={Alert} /> in my docs, the output becomes (note enum):
But when I use an inline array like this:
Alert.propTypes = {
/**
* The kind prop is used to set the alert's background color
*/
kind: t.oneOf([
'primary',
'secondary',
'positive',
'negative',
'warning',
'danger',
]),
}
The <Props /> component shows the available options (primary, secondary etc...).
How can I import the colourNames array from colours.js to Alerts's prop types, if I want Docz's <Props /> to display the available options?
Question
I have an
src/style/colours.js
file:And an
Alert
component, which imports the colour file and uses it to define the component's prop types:If I use
<Props of={Alert} />
in my docs, the output becomes (note enum):But when I use an inline array like this:
The
<Props />
component shows the available options (primary, secondary etc...).How can I import the
colourNames
array fromcolours.js
toAlerts
's prop types, if I want Docz's<Props />
to display the available options?Thanks in advance.