Installation

To install the @gyeongho/gyeongho-web-component package using npm, follow these steps:

1. Add the Github registry to your npm configuration:

• Create or edit the .npmrc file in your home directory.
• Add the following lines to the .npmrc file:

@gyeongho:registry=https://npm.pkg.github.com

2. Install the package using npm:

npm install @gyeongho/gyeongho-web-component

That's it! You should now have the @gyeongho/gyeongho-web-component package installed in your project. If you encounter any issues during the installation process, please make sure you have correctly followed the steps above and have the necessary permissions to access the package.

For more information and usage examples, refer to the package documentation.

Usage(Without Bundler)

add importMap in your html file.

<link rel="stylesheet" href="YOUR_PATH/gyeongho-web-components/dist/design.tokens.css" />
<link rel="stylesheet" href="YOUR_PATH/gyeongho-web-components/dist/index.css" />
<script type="importmap">
  {
    "imports": {
      "@gyeonghokim/gyeongho-web-components": "YOUR_PATH/gyeongho-web-components/dist/ghwc.es.js"
    }
  }
</script>
<script type="module">
  import "@gyeonghokim/gyeongho-web-components";
</script>

and use it in your html file, or in your framework or library.

<gh-table>
  <gh-table-row slot="header">
    <gh-table-cell head>Column 1</gh-table-cell>
    <gh-table-cell head>Column 2</gh-table-cell>
  </gh-table-row>
  <gh-table-row>
    <gh-table-cell>Row 1, Column 1</gh-table-cell>
    <gh-table-cell>Row 1, Column 2</gh-table-cell>
  </gh-table-row>
  <gh-table-row>
    <gh-table-cell>Row 2, Column 1</gh-table-cell>
    <gh-table-cell>Row 2, Column 2</gh-table-cell>
  </gh-table-row>
</gh-table>

Usage(With Bundler)

If you are using a bundler like Webpack or Rollup, you can import the package directly in your JavaScript code.

first, link the css file in your html file.

<link rel="stylesheet" href="YOUR_PATH/gyeongho-web-components/dist/design.tokens.css" />
<link rel="stylesheet" href="YOUR_PATH/gyeongho-web-components/dist/index.css" />

and import the package in your JavaScript or TypeScript code.

import "@gyeonghokim/gyeongho-web-components";
// if you want to override the Component Class
import { GHTable } from "@gyeonghokim/gyeongho-web-components/src/components/table/index";

Explore Our Components

Our Storybook includes documentation for all the available components. Explore the "Docs" tab of each component to learn more about its properties, events, and slots.

• gh-table - A table component

Customize

@gyeongho/gyeongho-web-components are built with Lit library, designed to be customizable. You can style them using CSS variables or extend them using Web Component standards. if you want to customize the style, you can override styles property in the component.

Contributing

I welcome contributions to @gyeongho/gyeongho-web-components. If you have suggestions for improvements or find any issues, please open an issue or submit a pull request.

Thank you for using @gyeongho/gyeongho-web-components.