Output Text

Output Text หรือ Text View คือ view ที่ใช้สำหรับแสดงตัวอักษรหรือข้อความ

Source Code

ReactJsReactJs Styled Component

Copy

import React from "react";

const elements = {
  h1: "h1",
  h2: "h2",
  h3: "h3",
  h4: "h4",
  h5: "h5",
  h6: "h6",
  p: "p",
  div: "div",
};

function OutputText({
  as,
  text,
  fontWeight,
  fontSize,
  padding,
  color,
  className,
  textAlign,
  style,
}) {
  const getStyle = () => {
    let fontStyle = { ...style };
    fontWeight ? (fontStyle.fontWeight = fontWeight) : null;
    fontSize ? (fontStyle.fontSize = fontSize) : null;
    color ? (fontStyle.color = color) : null;
    padding ? (fontStyle.padding = padding) : null;
    textAlign ? (fontStyle.textAlign = textAlign) : null;
    return fontStyle;
  };

  return React.createElement(
    elements[as] || elements.div,
    { className: className, style: getStyle() },
    text
  );
}
export default OutputText;

Copy

import styled from "styled-components";

export default function OutputText({
  text,
  as = "p",
  className,
  style,
  fontColor,
  fontWeight,
  fontSize,
  margin,
  padding,
}) {
  return (
    <Styled
      as={as}
      className={className}
      style={style}
      $fontColor={fontColor}
      $fontWeight={fontWeight}
      $fontSize={fontSize}
      $margin={margin}
      $padding={padding}
    >
      {text}
    </Styled>
  );
}

const Styled = styled.p`
  color: ${({ $fontColor }) => $fontColor};
  font-weight: ${({ $fontWeight }) => $fontWeight};
  font-size: ${({ $fontSize }) => $fontSize};
  margin: ${({ $margin }) => $margin};
  padding: ${({ $padding }) => $padding};
`;

Usage

ReactJsReactJs Styled Component

Copy

import Text from "../../element/output/Text";

export default function TestView() {
  return (
    <div className="test-view">
      <Text text={"Hello Output Text"} as={"h1"} />
    </div>
  );
}

Copy

import OutputText from "../../example/OutputText";

export default function TestView() {
  return (
    <div className="test-view">
      <OutputText text={"Output Text by Styled Component"} as={"h1"} />
    </div>
  );
}

Properties

Property	Description	Type
as	เปลี่ยน tag จาก div ไปเป็น tag อื่น	string
text	ข้อความของ view	string
fontWeight	ความหนาตัวอักษรของ view	string
fontSize	ขนาดตัวอักษรของ view	string
padding	พื้นที่ว่างระหว่างเส้นขอบของ view และ เนื้อหาของ view	string
color	สีของข้อความ	string
className	กำหนดลักษณะเฉพาะของ view	string
textAlign	จัดวางตำแหน่งของข้อความ	string
style	inline style	CSSProperties

Requirements

react styled-component

ยักซ่า (Yakxar)

สร้างสรรค์และแบ่งปันสื่อดิจิทัลง่ายๆ ที่นี่

เกี่ยวกับเรา

ติดต่อเรา

Cookie Policy