Introduction

useUI is a React library offering a suite of components and hooks that simplify app development. Access to components is provided through hooks, enabling the encapsulation of complex logic and state management internally, without dictating their appearance. This approach grants developers the freedom to style, while still providing a robust and flexible functionality for creating unique user interfaces 😎.

Available Hooks

• useModal
• useToast

Usage example

import { useModal, useButton, Modal } from 'useui-ts'

function Component() {
  const modal = useModal();

  return (
    <div>
      <button onClick={() => modal.open("first-modal", {
        size: "sm",
        title: "Are you sure?",
        content: (
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
            nulla rerum voluptatibus provident deserunt.
          </div>
        ),
        bottomNavigationBar: {
          justifyBetween: true,
          items: [
            <ConfirmButton {...confirmProps}>Send</SendButton>,
            <CancelButton onClick={() => modal.close("first-modal")}>Cancel</button>,
          ],
        },
      })}>Open Modal</button>
    </div>
  )
}

// Insert Modal component in App component
function App() {
  return (
    <div>
      <Modal />
    </div>
  )
}

Installation

npm install --save useui-ts