@clds/component-enhancer NPM

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