UnauthApp - React Components

React components used in all unauth apps

Installation

yarn add @unauthapp/react-components

Usage

const { Text, TextPrimary, ButtonIcon } from "@unauthapp/react-components";

export default class Home extends React.Components {
  render() {
    <React.Fragment>
      <Text>Sample</Text>
      <TextPrimary>Primary Text</TextPrimary>
      <ButtonIcon>Button Icon</ButtonIcon>
    </React.Fragmment>
  }
}

Components

Storybook is deployed at netlify and is accessible at https://unauth-react-components.netlify.com/

Table of Contents

• Buttons
• Card
• Icons
• Image
• Input
• Logo
• Forms
• Loaders
• Texts
• Prompts
• Toasts

Buttons

• Button with Icon - Button component with right arrow icon on right side.
• Button Primary - Primary button using primary color
• Button External Link - Button for external Links
• Button Home - Home icon as button

Card

• Card - Card container to hold any type of child element

Icons (Svg)

• Failed Icon - Failed Icon
• Success Icon - Success Icon
• Arrow Right - Arrow Right
• Sensor - Sensor icon

Image

• Image - Simple image component

Input

• Input Text - Input text component
• Input Text Disabled - Input text disabled component

Logo

• Logo - Simple logo component

Forms

• One Field Form - Form with single input field and button

Loaders

• Receive Loader - Receiving loader component (Gif)
• Send Loader - Sending loader component (Gif)

Texts

• Text - Simple text component
• Text Header - Text component for heading
• Text Primary - Primary text component

Prompts

• Prompt Confirm - Prompt Confirm component

Toasts

• Toast Success - Success Toast component
• Toast Fail - Fail Toast component

Contributing

We are constantly working on improving squash and we need all the help we can get. You can contribute to this project by giving suggestions, fixing open issues or by implementing a new feature. Read our contibution guide here

Contributors

Thank you to all the contributors who help in making this project better 🙌