نحوه ساخت کامپوننت متن با کامپوننت های React، TypeScript و Styled

✨ در یوتیوب تماشا کنید | 🐙 گیت هاب | 🎮 نسخه ی نمایشی

متن احتمالاً پر استفاده ترین مؤلفه در هر برنامه ای است. امروز می‌خواهم یک مؤلفه متن قابل استفاده مجدد را به اشتراک بگذارم که در کار توسعه جلویی من بسیار مفید است و باید در وقت شما نیز صرفه‌جویی کند.

جزء متن

این Text کامپوننت فقط یک پاراگراف استایل دار است که می توانیم با عبور دادن آن به هر عنصر دیگری مانند div، span یا heading تبدیل کنیم. as ویژگی. همچنین، می‌توانیم آن را به هر شکلی که دوست داریم، با استفاده از styles دارایی یا پیچیدن آن با styled تابع. به دلیل این انعطاف پذیری، به عنوان یک بلوک ساختمانی برای اجزای دیگر عمل می کند.

import styled, { DefaultTheme, css } from "styled-components"

const getTextColorRecord = ({ colors }: DefaultTheme) =>
  ({
    regular: colors.text,
    supporting: colors.textSupporting,
    supporting2: colors.textSupporting2,
    supporting3: colors.textSupporting3,

    primary: colors.primary,
    attention: colors.attention,
    alert: colors.alert,
    success: colors.success,
    reversed: colors.background,
    contrast: colors.contrast,
  } as const)

type TextWeight = "regular" | "semibold" | "bold"
const fontWeight: Record<TextWeight, number> = {
  regular: 400,
  semibold: 500,
  bold: 600,
}

type TextHeight = "small" | "regular" | "large"
const lineHeight: Record<TextHeight, number> = {
  small: 1,
  regular: 1.2,
  large: 1.5,
}

export type TextColor = keyof ReturnType<typeof getTextColorRecord>

export interface TextProps {
  color?: TextColor
  weight?: TextWeight
  size?: number
  height?: TextHeight
  centered?: boolean
  cropped?: boolean
  nowrap?: boolean
}

export const oneRemInPx = 16

const getFontSize = (sizeInPx: number) => {
  const sizeInRem = sizeInPx / oneRemInPx

  return `${sizeInRem}rem`
}

export const Text = styled.p<TextProps>`
  margin: 0;
  padding: 0;
  overflow-wrap: break-word;

  ${({ color, theme }) =>
    color &&
    css`
      color: ${getTextColorRecord(theme)[color].toCssValue()};
    `}
  ${({ weight }) =>
    weight &&
    css`
      font-weight: ${fontWeight[weight]};
    `}
  ${({ height }) =>
    height &&
    css`
      line-height: ${lineHeight[height]};
    `}
  ${({ size }) =>
    size &&
    css`
      font-size: ${getFontSize(size)};
    `}
  ${({ centered }) =>
    centered &&
    css`
      text-align: center;
    `}

  ${({ nowrap }) =>
    nowrap &&
    css`
      white-space: nowrap;
    `}

  ${({ cropped }) =>
    cropped &&
    css`
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    `}
`

برای سازگاری UI ما CSS پیش فرض مرورگر را در ابتدای صفحه بازنشانی می کنیم Text یک ظاهر طراحی شده با حذف حاشیه ها و لایه ها و تنظیم overflow-wrap به break-word برای جلوگیری از سرریز متن از شکستن طرح. سپس با رسیدگی به ویژگی های آن ادامه می دهیم.

بیایید به ویژگی های اضافی که می توانیم به آن منتقل کنیم نگاه کنیم Text جزء. در حالی که می‌توانیم رنگ مجموعه را از طریق styles یا className تنظیم کنیم، اغلب از آن استفاده می‌کنیم color ویژگی. این مجموعه محدودی از رنگ‌های نام‌گذاری شده است، مانند معمولی، پشتیبانی یا هشدار. ما از طریق به همه آنها دسترسی داریم getTextColorRecord تابعی که به نوبه خود بر موضوع مولفه‌های مدل‌دهی شده متکی است. توجه داشته باشید که همه نام ها به جای رنگ زرد یا سفید، رنگ را توصیف می کنند. به این ترتیب می‌توانیم پالت رنگ را تغییر دهیم و بدون تغییر آن، تم‌های جدید اضافه کنیم Text جزء.

این weight ملک می چرخد regular، semibold و bold به 400، 500، 600. معمولاً برای اکثر موارد کافی است. اما شما همچنین می توانید آن را برای موقعیت خود گسترش دهید، و thin یا extrabold گزینه ها برای مثال

این size یک ملک جالب و مورد نظر است. در حالی که یک پیکسل را به عنوان یک عدد ارسال می کنیم، در حال تبدیل به رم است. برای ما ساده تر است که به پیکسل فکر کنیم. فکر می کنیم 16px به عنوان یک اندازه پیش‌فرض، و برای ایجاد یک نوع کوچک‌تر، انتقال آن راحت‌تر است 14px به جای 0.875rem. در عین حال، ما با تبدیل پیکسل ها به رم، برنامه را در دسترس تر می کنیم، به طوری که کاربران می توانند اندازه فونت را در تنظیمات مرورگر خود تغییر دهند و برنامه مطابق با آن تنظیم می شود.

این height دارایی نشان می دهد line-height و می تواند باشد small، regular، یا large، اما ما به ندرت از آن استفاده می کنیم.

در حالی که برخی از افراد ترجیح می دهند انواع متن ها را داشته باشند، با توجه به تجربه من، تکیه بر ویژگی هایی مانند این را عملی تر دیدم size و weight برای ایجاد انواع سبک های متن با این حال، اگر پروژه شما از داشتن انواع سود می برد، می توانید آن را به عنوان یک ویژگی اضافه کنید و سپس یک رکورد از سبک ها برای هر گونه داشته باشید.

بالاخره وجود دارند centered، cropped، و nowrap کمک کننده هایی که خود توضیح دهنده هستند.