npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

goni-tab-layout-component

v0.1.2

Published

A tab layout component for building responsive web applications with React.

Downloads

1

Readme

TabLayout 라이브러리

TabLayout 라이브러리는 React 애플리케이션에서 탭 기반의 레이아웃을 구현하는 데 도움을 주는 라이브러리입니다. 이 라이브러리를 사용하여 여러 탭 간에 콘텐츠를 전환하고 사용자에게 편리한 탭 인터페이스를 제공할 수 있습니다.

본 라이브러리는 다음과 같은 제작 의도를 가지고 개발되었습니다:

  • 용량 최소화: TabLayout은 최소한의 스타일을 포함하여 용량을 최소화하고 페이지 로딩 속도를 개선하며, 애플리케이션의 성능을 향상시키도록 고안되었습니다.

  • 간편한 적용: TabLayout은 스타일 및 디자인에 크게 신경 쓰지 않고도 사용자가 쉽게 UI를 구현할 수 있도록 설계되었습니다. 스타일 관련 Props는 제공되지 않으며, 사용자가 간단하게 TabLayout을 활용할 수 있는 간편한 옵션을 제공합니다.

  • 적절한 기능: 필요한 기본 기능을 제공하고 복잡한 설정을 최소화하여 사용자에게 직관적이고 쉬운 경험을 제공합니다.

설치

먼저 npm을 사용하여 패키지를 설치합니다:

npm i goni-tab-layout-component

Props

TabLayout 컴포넌트는 다음과 같은 Props를 사용합니다:

  • tabs (string[]): 탭 이름을 포함하는 문자열 배열을 전달합니다.
  • children (ReactNode[]): 각 탭에 해당하는 콘텐츠를 포함하는 ReactNode 배열을 전달합니다.

사용 예제

import React from "react";
import TabLayout from "goni-tab-layout-component";

const App = () => {
  return (
    <div>
      <h1>TabLayout 예제</h1>
      <TabLayout tabs={["Tab 1", "Tab 2", "Tab 3"]}>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
      </TabLayout>
    </div>
  );
};

export default App;

기여

이 프로젝트에 기여하려면 GitHub 저장소를 방문하십시오: GitHub 저장소 링크

라이센스

이 프로젝트는 MIT 라이센스 하에 릴리스되었습니다.

자세한 정보는 LICENSE 파일을 참조하십시오: LICENSE 파일