@flownet/react-layout-asya

Introduction

@flownet/react-layout-asya is a React component designed to help developers manage and adjust the layout and presentation of UI elements based on the dimensions of the browser window or container. Its primary purpose is to provide a responsive layout that reacts to size changes, ensuring a proper arrangement and scaling of UI components.

How It Works

The component makes use of the useLayout custom hook, which listens to window resize events and updates layout attributes accordingly. Depending on the dimensions, it determines whether the layout should be horizontal, vertical, or square and adjusts the font size and spacing to fit the current window size. This dynamic adjustment allows for a consistent user interface across different devices and screen sizes.

Key Features

• Responsive Layout Detection: Automatically adjusts the layout to horizontal, vertical, or square based on the container's dimensions.
• Dynamic Font Sizing: Scales font size appropriately to ensure readability regardless of the device or window size.
• Configurable UI Elements: Offers state management for titles, descriptions, progress indicators, and controls, allowing for flexible and customizable UI compositions.
• Customizable Styles: Provides properties to adjust styling such as alignment, spacing, colors, and overflow for both container and child elements.

Conclusion

@flownet/react-layout-asya offers a straightforward solution for building responsive web applications with React. By automatically adjusting layout and font sizing, it helps developers maintain a consistent and usable interface across various devices, enhancing the end-user experience without the need for manual adjustments.

@flownet/react-layout-asya Developer Guide

Overview

The @flownet/react-layout-asya library provides a flexible layout component for React applications. Its core functionality allows developers to create responsive layouts that adapt to changes in container dimensions. By using the public API, developers can manage layout properties such as alignment, row gaps, and overflow settings depending on the available space and intended design. This library is well-suited for creating adaptive user interfaces that adjust seamlessly across different device sizes and orientations.

Installation

To install the library, use npm or yarn:

# Using npm
npm install @flownet/react-layout-asya

# Using yarn
yarn add @flownet/react-layout-asya

Usage

The library offers a primary component that handles responsive layout configurations: LayoutComponent. This component allows you to specify different properties such as title, description, and progress elements within your layout, and automatically adjusts its styling based on available screen real estate.

Basic Usage Example:

import React from 'react';
import LayoutComponent from '@flownet/react-layout-asya';

const ExampleLayout = () => {
  return (
    <LayoutComponent
      title={{ value: 'Dashboard' }}
      description={{ value: 'Current status overview' }}
      progress={{ value: 40 }}
      layout={{
        container: {
          justifyContent: 'flex-start',
          alignItems: 'center'
        }
      }}
      controls={[
        { title: 'Confirm', action: () => console.log('Confirmed!') },
        { title: 'Cancel', action: () => console.log('Cancelled!') }
      ]}
    >
      <div>Your content goes here</div>
    </LayoutComponent>
  );
};

export default ExampleLayout;

Examples

Example 1: Dynamic Content Layout

This example demonstrates how to use the LayoutComponent to dynamically adjust its layout and font size based on the container size.

import React from 'react';
import LayoutComponent from '@flownet/react-layout-asya';

const DynamicLayout = () => {
  return (
    <LayoutComponent
      title={{ value: 'Responsive Title' }}
      description={{ value: 'Responsive Description' }}
      layout={{
        container: {
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          rowGap: 2
        },
        content: {
          overflow: 'auto'
        }
      }}
      controls={[
        { title: 'Submit', action: () => alert('Submitted!'), color: 'primary' },
        { title: 'Reset', action: () => alert('Reset!'), color: 'secondary' }
      ]}
    >
      <p>Here is your responsive content.</p>
    </LayoutComponent>
  );
};

export default DynamicLayout;

Acknowledgement

This library is built to leverage various React hooks and styling paradigms, making it easier to create adaptive layouts without worrying about complex resize listeners or manual calculations. Special thanks to contributors who have furthered the development and optimization of this library.

This guide aims to provide a straightforward path to integrating @flownet/react-layout-asya into your projects. For any issues or contributions, refer to the library's GitHub repository.

Input Schema

$schema: https://json-schema.org/draft/2020-12/schema
type: object
properties:
  children:
    description: Children elements to be rendered inside the form.
  title:
    type: string
    description: Title of the form.
  titleAlignSelf:
    type: string
    description: Alignment of the title within the form.
  description:
    type: string
    description: Description text of the form.
  descriptionAlignSelf:
    type: string
    description: Alignment of the description within the form.
  progress:
    type: number
    description: Progress value, displayed as a linear progress bar.
  progressAlignSelf:
    type: string
    description: Alignment of the progress bar within the form.
  layout:
    type: object
    properties:
      contentAlignSelf:
        type: string
        default: stretch
        description: Alignment of the content within the layout.
      contentFlexGrow:
        type: number
        description: Flex grow value for the content.
      contentOverflow:
        type: string
        default: visible
        description: Overflow behavior for the content.
      containerJustifyContent:
        type: string
        default: center
        description: Justification of the container's content.
      containerAlignItems:
        type: string
        default: flex-start
        description: Alignment of the container's items.
      containerRowGap:
        type: integer
        default: 3
        description: Row gap of the container's items.
      containerColor:
        type: string
        default: inherit
        description: Text color of the container.
      containerBackgroundColor:
        type: string
        default: inherit
        description: Background color of the container.
      containerOverflow:
        type: string
        default: visible
        description: Overflow behavior of the container.
    description: Layout properties of the form and containers.
  controls:
    type: array
    items:
      type: object
      properties:
        title:
          type: string
          description: Title of the control button.
        focus:
          type: boolean
          description: Whether the button should be focused.
        size:
          type: string
          description: Size of the button.
        variant:
          type: string
          description: Variant style of the button.
        color:
          type: string
          description: Color of the button.
        action:
          description: Action handler for the button click.
    description: Control buttons configuration for the form.
  controlsAlignSelf:
    type: string
    description: Alignment of the controls within the form.
form:
  type: object
  description: Object providing access to modify various state values.
  properties:
    setTitle:
      description: Function to set the form title.
    setDescription:
      description: Function to set the form description.
    setProgress:
      description: Function to set the form progress.
    setControls:
      description: Function to set the form controls.
    setContainerJustifyContent:
      description: Function to set the container justify content.
    setContainerAlignItems:
      description: Function to set the container align items.
    setContainerRowGap:
      description: Function to set the container row gap.
    setContainerColor:
      description: Function to set the container text color.
    setContainerBackgroundColor:
      description: Function to set the container background color.
    setContainerOverflow:
      description: Function to set the container overflow behavior.
    setContentAlignSelf:
      description: Function to set the content alignment.
    setContentFlexGrow:
      description: Function to set the content flex grow.
    setContentOverflow:
      description: Function to set the content overflow behavior.
    setTitleAlignSelf:
      description: Function to set the title alignment.
    setDescriptionAlignSelf:
      description: Function to set the description alignment.
    setProgressAlignSelf:
      description: Function to set the progress alignment.
    setControlsAlignSelf:
      description: Function to set the controls alignment.