@statikly/funk

<p align="center"> <a href="" rel="noopener"> <img width=350px height=350px src="https://raw.githubusercontent.com/RobertBroersma/funk/main/logo.svg" alt="Project logo"></a> </p>

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@statikly/funk
0.3.1a year ago2 years agoMinified + gzip package size for @statikly/funk in KB

Readme

Project logo

Status() GitHub Issues GitHub Pull Requests License
---

Unstyled, funktional components for React

<br> 

📝 Table of Contents

🧐 About

This project contains a set of unstyled, accessible components for React, designed to work with class-based style systems.

🏁 Getting Started

Installing

``` npm install @statikly/funk --save ``` Or ``` yarn add @statikly/funk ```

🎈 Usage

At the moment there is one component, TabGroup

Example

```tsx import { TabGroup } from '@statikly/funk'; function TabButton({ index, title }) { return (
<TabGroup.Tab
index={index}
className="text-indigo-700 font-bold text-xs uppercase tracking-wider px-3 inline-block rounded-full mb-2 focus:outline-none focus:bg-indigo-200"
activeClassName="bg-indigo-300"
inactiveClassName="hover:bg-indigo-200"
>
{title}
</TabGroup.Tab>
); } export default function Vertical() { return (
<TabGroup numTabs={2}>
<div className="py-6 md:py-12 container mx-auto">
<div className="p-8">
<div className="text-center max-w-screen-md mx-auto">
<h2 className="font-bold text-4xl lg:text-4xl leading-tight">
A quick tour
</h2>
<p className="pt-4 text-gray-600 text-lg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
nec ex sed nulla.
</p>
</div>
<TabGroup.TabList className="pt-8 grid grid-flow-col justify-center gap-3">
<TabButton index={0} title="Copy & paste" />
<TabButton index={1} title="Casual fridays" />
</TabGroup.TabList>
<div className="pt-6 relative flex justify-center">
<TabGroup.TabPanel
index={0}
as="img"
className="absolute rounded shadow-xl transform transition-all duration-500"
activeClassName="translate-y-0 opacity-1"
inactiveClassName="opacity-0 translate-y-2"
src="https://images.unsplash.com/photo-1583308148228-adac08432fc1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&h=450&q=80"
/>
<TabGroup.TabPanel
index={1}
as="img"
className="absolute rounded shadow-xl transform transition-all duration-500"
activeClassName="translate-y-0 opacity-1"
inactiveClassName="opacity-0 translate-y-2"
src="https://images.unsplash.com/photo-1588769557939-76552854025b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&h=450&q=80"
/>
</div>
</div>
</div>
</TabGroup>
); } ```