q-react-ui

A clean, minimal, tree-shakable React UI components & hooks.

Installation

⚠ You must install q-js-utils, unless you already have it installed.

npm install q-react-ui q-js-utils

Or

yarn add q-react-ui q-js-utils

Components

1. Avatar
2. AvatarGroup
3. Form
4. Resizable
5. Editor (based-on monaco-editor)

Usage

import { Avatar, AvatarGroup, type AvatarItemProps } from 'q-react-ui';

const App = () => {
  const users: AvatarItemProps = [
    {
      alt: "Muhamad Husein",
    },
    {
      alt: "Tony Start"
    },
    {
      alt: "Peter Parker"
    },
    {
      alt: "Clark Kent"
    },
    {
      alt: "Diana Prince"
    },
    {
      alt: "Bruce Wayne"
    },
    {
      alt: "John Doe"
    }
  ];

  return (
    <>
      <Avatar
        alt="Muhamad Husein"
        src="https://avatars.githubusercontent.com/u/19644272?v=4"
      />

      <Avatar
        size={55}
      />

      <Avatar
        alt="Steve Roger" 
        size={55}
      />

      <h2>AvatarGroup</h2>
      <AvatarGroup
        size={57}
        items={users.map((item: any) => ({ ...item, className: "rounded-full" }))}
        renderRemaining={(remaining, remaningProps, remainingItems) => (
          <div 
            {...remaningProps}
            className={"bg-red-400 " + remaningProps.className + " text-red-100"}
            title={remainingItems.map(item => item.alt).join('\n')}
          >
            +{remaining}
          </div>
        )}
      />

      <hr />

      <AvatarGroup
        items={users.map((item: any) => ({ ...item, className: "rounded-full" }))}
      />
    </>
  );
}

Or single import for tree-shaking.

import { Avatar } from 'q-react-ui/Avatar';
import { AvatarGroup } from 'q-react-ui/AvatarGroup';

About Tree-Shaking:

• Tree Shaking - webpack
• Tree shaking - Glossary - MDN Web Docs
• Tree-Shaking: A Reference Guide

Hooks

A React Hook to detect and monitor the browser's online/offline network status. It provides the current network status as a boolean and allows optional callbacks for when the network status changes.

useNetwork

import { useNetwork } from 'q-react-ui/useNetwork';

Usage

import { useNetwork } from 'q-react-ui/useNetwork';
import { cn } from 'q-js-utils/cn';

const App = () => {
  const isOnline = useNetwork({
    onOnline: () => alert('ONLINE'),
    onOffline: () => alert('OFFLINE'),
  });

  return (
    <div>
      <h4 
        className={
          cn(
            "text-2xl font-bold", 
            isOnline ? "text-blue-600" : "text-red-600"
          )
        }
      >
          {isOnline ? "Online" : "Offline"}
        </h4>
    </div>
  );
}

Next Devs:

Components

1. Img / Image 🔧📝
2. Textarea 🔧📝

• https://github.com/Andarist/react-textarea-autosize
• https://github.com/react-component/textarea

3. AdaptiveItems 🔧📝