@clds/component-enhancer
@cld/component-enhancer
This package contains some utilities and HOC functions that will help you create themeable components
asStyledComponent
In case you have a component which is not a styled-component and you want to allow overriding it's style using [interpolation][https://www.styled-components.com/docs/advanced#referring-to-other-components] you should use this wrapper.
import React from 'react';
import styled from 'styled-components';
import { asStyledComponent } from '@cld/component-enhancer';
const StyledDiv = styled.div`
color: red;
`;
const Component = React.forwardRef((props, ref) => (
<StyledDiv {...props} ref={ref} />
));
export const CompAsStyledComponent = asStyledComponent(Component);Text wrapper
We created a dedicated styled component for wrapping text items so it will be easy to style an inner text elements in child components
TextWrap
This is the styled component that wraps the text elements, you can use it to style nested text elements in children
import styled from 'styled-components';
import { TextWrap } from '@cld/component-enhancer';
const StyledDiv = styled.div`
color: red;
${TextWrap} {
margin: 10px;
}
`;
export default StyledDiv;useWrapTextChildren
You can use it to automatically wrap any text children which are not wrapped with an HTML element
import React from 'react';
import { useWrapTextChildren } from '@cld/component-enhancer';
export default ({ children }) => {
const parsedChildren = useWrapTextChildren(children);
return <div>{parsedChildren}</div>;
};WrapTextChildren
In case you are not using React hooks you can use this component as a parent to the received children, this will wrap any text children which are not wrapped with an HTML element
import React from 'react';
import { WrapTextChildren } from '@cld/component-enhancer';
class MyComponent extends React.Component {
render() {
return <WrapTextChildren>{props.children}</WrapTextChildren>;
}
}withTextWrap
In case you want to wrap an existing component with [TextWrap][#textwrap] you can use this HOC
import React from 'react';
import { withTextWrap } from '@cld/component-enhancer';
import Component from './Component';
const WrappedComponent = withTextWrap(Component);
export default WrappedComponent;Versioning
This library follows Semantic Versioning.
License
See LICENSE