@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.

``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);
`

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

$3

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;
`

$3

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;
``

Versioning

This library follows Semantic Versioning.

License

See LICENSE