Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
interface-previews
.text {
font-size: 1.2rem;
color: var(--color-secondary);
&--preview {
opacity: 0.1;
height: 13px;
width: 100%;
background: var(--color-secondary);
}
@media (--medium-screen) {
font-size: 1.4rem;
&--preview {
height: 16px;
}
}
}
import React, { PropTypes } from 'react';
import cn from 'classnames';
const Text = ({
className,
tag,
preview,
previewStyle,
children,
...props
}) =>
React.createElement(tag, {
style: preview ? previewStyle : {},
className: cn('text', {
'text--preview': preview,
}, className),
...props,
}, children);
Text.propTypes = {
className: PropTypes.string,
tag: PropTypes.string.isRequired,
preview: PropTypes.bool.isRequired,
previewStyle: PropTypes.object,
children: PropTypes.node,
};
Text.defaultProps = {
tag: 'p',
preview: false,
};
export default Text;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment