---
npm install @clds/component-enhancer---

This package contains some utilities and HOC functions that will help you create themeable components
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.
``javascript
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) =>
export const CompAsStyledComponent = asStyledComponent(Component);
`
We created a dedicated styled component for wrapping text items so it will be easy to style an inner text elements in child components
This is the styled component that wraps the text elements, you can use it to style nested text elements in children
`javascript
import styled from 'styled-components';
import { TextWrap } from '@cld/component-enhancer';
const StyledDiv = styled.div
color: red;
${TextWrap} {
margin: 10px;
};
export default StyledDiv;
`
You can use it to automatically wrap any text children which are not wrapped with an HTML element
`javascript
import React from 'react';
import { useWrapTextChildren } from '@cld/component-enhancer';
export default ({ children }) => {
const parsedChildren = useWrapTextChildren(children);
return
$3
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
`javascript
import React from 'react';
import { WrapTextChildren } from '@cld/component-enhancer';class MyComponent extends React.Component {
render() {
return {props.children} ;
}
}
`$3
In case you want to wrap an existing component with [TextWrap][#textwrap] you can use this HOC
`javascript
import React from 'react';
import { withTextWrap } from '@cld/component-enhancer';
import Component from './Component';const WrappedComponent = withTextWrap(Component);
export default WrappedComponent;
``This library follows Semantic Versioning.
See LICENSE