Asteroid UI for React

Asteroid UI aims to accelerate rapid prototyping of any web/mobile apps by providing a ready-to-use skeleton.
It's build with the atomic design paradigm in mind.
To grasp what's possible with Asteroid UI, you can play around with this page.

Installation

yarn add asteroid-ui

Add these 2 tags to HTML head.

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<link
  key="fontawesome"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
  rel="stylesheet"
/>

How to Use

setNav will be populated with various useful states and functions to menipurate the UI.

import React, { useState } from "react"
import { Nav } from 'asteroid-ui'

export default () =>{
  const [nav, setNav] = useState({ modal: {} })
  return <Nav {...{ setNav }}>app body</Nav>
}

Nav Props

• setNav
• style
• logo
• appname
• avatar
• dropdown
• loading
• modal
• alerts
• setAlerts
• tmenu
• bmenu
• smenu
• cmenu
• tmenu_selected
• bmenu_selected
• smenu_selected

Change Themes

The simplest way to change the look is to specify thestyle.highlight prop.

Fullscreen Mode

nav.fullscreen.toggle() toggles fullscreen mode, and nav.isFullscreen indicates if the app is in fullscreen mode.

Loading

Give loading prop to Nav to block the entire screen.

Toasts

With nav.toast, toasts can be popped up in 4 variants( success | error | warning | info ) at 6 locations ( top | left | bottom | right | top-left | top-right | bottom-left | bottom-right ).

nav.toast({
  title: "Toast Title",
  description: "Toast Body",
  position: "bottom",
  status: "success",
  duration: 9000,
  isClosable: true
})

Alerts

Alerts can be displayed at the bigining of the page in 4 variants( success | error | warning | info ) by giving alerts prop to Nav.

{
  key: 'add-success',
  name: 'Success Alert',
  onClick: () => addAlert('Asteroid UI is awesome!', 'success')
}

Modal

Modal can be displayed by giving modal prop to Nav, and execute nav.modal.onOpen().

{
  title: 'This is a Modal',
  body: 'Do you want to close this modal?',
  footer: [
    { title: 'Close', scheme: 'blue', onClick: nav.modal.onClose },
    {
      title: 'Keep it Open',
      variant: 'ghost',
      onClick: () => {}
    }
  ]
}