TS - Base Components

Base Components

Sources:

• **

title: Contents 
style: nestedList # TOC style (nestedList|inlineFirstLevel)
minLevel: 1 # Include headings from the specified level
maxLevel: 4 # Include headings up to the specified level
includeLinks: true # Make headings clickable
debugInConsole: false # Print debug info in Obsidian console

Overview

• Theme
• Button
• Environment

Code Snippet

Example using a custom useTheme hook:

import { useTheme } from '@/theme'
 
const Button = ({ className, children }) => {
  const { primaryColor } = useTheme();
  const style = { background: primaryColor };
  return (
    <button style={style} className={className}>
      {children}
    </button>
  );
};

Example using a className custom Prop, custom button.styles.css, and exported Prop type along with component:

import React, { ButtonHTMLAttributes } from 'react';
 
import classNames from 'classnames';
import styles from './button.styles.css'
 
type ButtonVariant = 'filled' | 'outlined';
 
export type ButtonProps = {
  /**
  * Button Variant to Use
  * @default 'outlined'
  */
  variant?: ButtonVariant;
  /**
  * Children
  */
  children?: ReactNode;
  /**
  * Class Name
  */
  className?: string;
} & React.HTMLAttributes<HTMLButtonElement>;
 
const ButtonStyles: { [key in ButtonVariant]: React.CSSProperties } = {  
  filled: {  
    backgroundColor: 'blue',
    color: 'white',
  },
  outlined: {
    border: '2px solid blue',
    backgroundColor: 'transparent',
    color: 'blue',
    },  
};
 
export function Button({ variant = 'outlined', children, className, ...props }: ButtonProps) {
  return (
    <button
      type='button'
      style={{
      ...ButtonStyles[variant],
      padding: '10 px 20px',
      borderRadius: '5px',
      cursor: 'pointer',
      ...style
      }} {...props}
    >
      {children}
    </button>
  );
};

In this snippet, the className prop works alongside the classNames utility. The styles.button provides the default styling defined in the component’s stylesheet. The className prop, however, is for additional style — adding or overriding the original base style, by the consumer of the component.

The sequence in which these class names are applied is significant. Placing the className prop last in the classNames function ensures that any styles provided by this prop override the default styles in case of any conflicts. This design allows users to maintain the fundamental design and functionality of the component while customizing its appearance to suit specific requirements. It strikes a balance between maintaining a consistent base style and offering flexibility for customization, a vital aspect of creating reusable, adaptable components.

If you observe closely, the Prop type for the Button merges with the overall prop types of the HTML button. This means that apart from the default configured props, consumers can pass their own configurations, such as an onClick or even an aria-label onto this component, and it will be handled using the ...rest being spread onto the button component.

See Also

• JavaScript Map of Content
• JavaScript Code
• Hyper Text Markup Language (HTML)
• Cascading Style Sheets (CSS)
• React.js
• Next.js

---

Appendix

Note created on 2024-04-15 and last modified on 2024-04-15.

Backlinks

LIST FROM [[TS - Base Components]] AND -"CHANGELOG" AND -"04-RESOURCES/Code/TypeScript/TS - Base Components"

---

(c) No Clocks, LLC | 2024