Creating custom components

thenativeweb-ux uses JSS and classnames to style its components. If you create custom components, you can use same underlying technologies to create styles using TypeScript.

import { classNames, ComponentClassNames, createUseStyles, Theme } from 'thenativeweb-ux';
import React, { FunctionComponent, ReactElement } from 'react';

type CustomComponentClassNames = 'CustomComponent' | 'SizeLg';

const useStyles = createUseStyles<CustomComponentClassNames>((theme): ComponentClassNames<CustomComponentClassNames> => ({
  CustomComponent: {
    width: theme.customComponent.width
  },

  SizeLg: {
    fontSize: '24px'
  }
}));

interface CustomComponentProps {
  className?: string;
  id: string;
  size?: 'lg';
}

const CustomComponent: FunctionComponent<CustomComponentProps> = ({
  className,
  children,
  id,
  size
}): ReactElement => {
  const classes = useStyles();
  const componentClasses = classNames(
    classes.CustomComponent,
    {
      [classes.SizeLg]: size === 'lg'
    },
    className
  );

  return (
    <div id={ id } className={ componentClasses }>
      { children }
    </div>
  );
};

export { CustomComponent };