{"id":24385626,"url":"https://github.com/rafal-r/airr-react","last_synced_at":"2026-03-12T08:43:04.067Z","repository":{"id":24411307,"uuid":"101424251","full_name":"rafal-r/airr-react","owner":"rafal-r","description":"Animated views navigation and more for your Desktop and Mobile ReactJS app","archived":false,"fork":false,"pushed_at":"2024-05-22T20:33:23.000Z","size":4215,"stargazers_count":58,"open_issues_count":22,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-31T16:24:56.766Z","etag":null,"topics":["navigation","react","react-components","single-page-app"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rafal-r.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-25T16:54:16.000Z","updated_at":"2025-02-21T15:49:39.000Z","dependencies_parsed_at":"2024-06-21T13:14:32.228Z","dependency_job_id":"9fbf9cdf-6396-495d-ae63-ba2c9ef4c83d","html_url":"https://github.com/rafal-r/airr-react","commit_stats":{"total_commits":371,"total_committers":7,"mean_commits":53.0,"dds":0.2722371967654986,"last_synced_commit":"db5579f42ec7dbcf742880a249959790f9851082"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/rafal-r/airr-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafal-r%2Fairr-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafal-r%2Fairr-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafal-r%2Fairr-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafal-r%2Fairr-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafal-r","download_url":"https://codeload.github.com/rafal-r/airr-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafal-r%2Fairr-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269728021,"owners_count":24465578,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["navigation","react","react-components","single-page-app"],"created_at":"2025-01-19T11:19:42.269Z","updated_at":"2026-03-12T08:42:59.015Z","avatar_url":"https://github.com/rafal-r.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.com/rafal-r/airr-react.svg?branch=master)](https://travis-ci.com/rafal-r/airr-react)\n[![Maintainability](https://api.codeclimate.com/v1/badges/c19bd22b21a8c3ffc84a/maintainability)](https://codeclimate.com/github/rafal-r/airr-react/maintainability)\n[![Known Vulnerabilities](https://snyk.io/test/github/rafal-r/airr-react/badge.svg?targetFile=package.json)](https://snyk.io/test/github/rafal-r/airr-react?targetFile=package.json)\n\n\u003chr/\u003e\n\n# airr-react\n\nThis library is set of several components that helps building Single Page Apps with ReactJS.  \nairr-react defines few basic UI classes and features that every app needs. The core component is responsible for maintaining navigation in the app.\nAll of it when minified and gzipped weights ~11.8kB ([bundlephobia.com](https://bundlephobia.com/result?p=airr-react@latest)).\n\nLibrary can be used for:\n\n-   creating unique looking and behaving apps,\n-   creating PWA or standard responsive web apps for dektop, phone and tablet browsers,\n-   rapidly designing prototypes showing your ideas.\n\n# Table of contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n-   [Installation](#installation)\n-   [Usage](#usage)\n-   [Concept](#concept)\n    -   [PureComponents](#purecomponents)\n-   [View's life-cycles](#views-life-cycles)\n-   [React Component's life-cycles](#react-components-life-cycles)\n-   [Rendering View's content](#rendering-views-content)\n-   [Typescript support](#typescript-support)\n-   [Examples](#examples)\n    -   [Kitchen sink app](#kitchen-sink-app)\n    -   [Infinite viewport](#infinite-viewport)\n    -   [Simple Scene](#simple-scene)\n-   [Scene API](#scene-api)\n    -   [viewsConfig](#viewsconfig)\n    -   [changeView](#changeview)\n    -   [openSidepanel](#opensidepanel)\n    -   [hideSidepanel](#hidesidepanel)\n    -   [openMayer](#openmayer)\n    -   [closeMayer](#closemayer)\n    -   [Other methods](#other-methods)\n-   [Props documentation](#props-documentation)\n    -   [Scene Props](#scene-props)\n    -   [View Props](#view-props)\n    -   [Sidepanel Props](#sidepanel-props)\n    -   [Mayer Props](#mayer-props)\n    -   [Common types](#common-types)\n        -   [AnimationType](#animationtype)\n        -   [NavbarMenu](#navbarmenu)\n        -   [SidepanelConfig](#sidepanelconfig)\n        -   [ViewConfig](#viewconfig)\n        -   [Placement](#placement)\n        -   [MayerButtonProps](#mayerbuttonprops)\n-   [License](#license)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\n```\nnpm i airr-react\n```\n\n## Usage\n\nHere's a simple code usage that provides a viewport with two views.\n\n[![Edit airr-react-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/rafal-r/airr-react-simple-scene)\n\n```javascript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Scene, View, Sidepanel } from \"airr-react\";\nimport \"airr-react/dist/airr-react.css\";\nimport \"./styles.css\";\n\nconst BlueViewName = \"blue-view\";\nconst RedViewName = \"red-view\";\n\nclass BlueView extends View {\n    content() {\n        return (\n            \u003cdiv className={BlueViewName}\u003e\n                BlueView\n                \u003cbr /\u003e\n                \u003cbutton onClick={this.props.goToRedView}\u003ego to red\u003c/button\u003e\n                \u003cbutton onClick={this.props.openSidepanel}\u003eopen sidepanel\u003c/button\u003e\n                \u003cbutton onClick={this.props.openMayer}\u003eopen modal\u003c/button\u003e\n            \u003c/div\u003e\n        );\n    }\n}\nclass RedView extends View {\n    content() {\n        return (\n            \u003cdiv className={RedViewName}\u003e\n                RedView\n                \u003cbr /\u003e\n                \u003cbutton onClick={this.props.goToBlueView}\u003ego to blue\u003c/button\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nclass Viewport extends Scene {\n    viewsConfig = {\n        [BlueViewName]: {\n            type: BlueView,\n            props: {\n                name: BlueViewName,\n                goToRedView: () =\u003e this.changeView(RedViewName),\n                openSidepanel: this.openSidepanel,\n                openMayer: () =\u003e\n                    this.openMayer({\n                        name: \"foo-mayer\",\n                        content: (\n                            \u003cdiv\u003e\n                                Hello! I am modal layer!\n                                \u003cbr /\u003e\n                                \u003cbutton onClick={() =\u003e this.closeMayer(\"foo-mayer\")}\u003e\n                                    close me\n                                \u003c/button\u003e\n                            \u003c/div\u003e\n                        )\n                    })\n            }\n        },\n        [RedViewName]: {\n            type: RedView,\n            props: {\n                name: RedViewName,\n                goToBlueView: () =\u003e this.changeView(BlueViewName)\n            }\n        }\n    };\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            ...this.state,\n            activeViewName: BlueViewName,\n            sidepanel: {\n                type: Sidepanel,\n                props: {\n                    children: \"Hello! I'm sidepanel!\"\n                }\n            },\n            views: [this.getFreshViewConfig(BlueViewName), this.getFreshViewConfig(RedViewName)]\n        };\n    }\n}\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\u003cViewport /\u003e, rootElement);\n```\n\n## Concept\n\n`View` class component is responsible for your single view instance. Put all other components that creates you view inside it and render with `content()` method.\n\nOther props and functions that will manage changing of your views can be pass to `View` class from `Scene` class.\nThe `Scene` is a views container, core class that can fill view with proper methods to navigate between views, open popups and define sidepanel.\n\n### PureComponents\n\nFrom version 3.0.0 of airr-react all components are implementing PureComponents approach.\nSo remember that your views will not be updated unless you provide them with different props.\n\n## View's life-cycles\n\nAirr library provides easy to implement views life-cycles methods.\nWhen you develop apps divided into certain views you have to deal with many tasks before or after certain view is activated and animated into the screen.\n\nLike React's `componentDidMount` method, Airr provides self explanatory methods that can be used by Components that extends `View` or `Scene` component. These methods are:\n\n-   `viewBeforeActivation`\n-   `viewAfterActivation`\n-   `viewBeforeDeactivation`\n-   `viewAfterDeactivation`\n\n`Scene` or `View` can:\n\n```javascript\nclass JustView extends View {\n    viewBeforeActivation() {\n        console.log(\"JustView will be active soon\");\n    }\n    viewAfterActivation() {\n        console.log(\"JustView was activated soon\");\n    }\n    viewBeforeDeactivation() {\n        console.log(\"JustView will be deactivated\");\n    }\n    viewAfterDeactivation() {\n        console.log(\"JustView is now inactive\");\n    }\n    componentDidUpdate() {\n        console.log(\"JustView was updated\");\n    }\n}\n```\n\nAdditionaly `Scene` has:\n\n-   `viewsAnimationEnd(oldViewName: string, newViewName: string)`\n\n```javascript\nclass BarScene extends Scene {\n    viewsAnimationEnd(oldViewName, newViewName) {\n        console.log(\n            `[BarScene::viewsAnimationEnd] oldViewName: ${oldViewName}, newViewName: ${newViewName}`\n        );\n    }\n\n    componentDidMount() {\n        super.componentDidMount();\n        console.log(\"Scene did mount\");\n    }\n}\n```\n\n## React Component's life-cycles\n\nYou can use all well known React's life-cycles methods when extending airr-react's components.  \nOnly when using `componentDidMount` in the class that extends `Scene` you must also invoke super's method like:\n\n```javascript\n  componentDidMount() {\n    super.componentDidMount()\n    console.log(\"Scene did mount\")\n  }\n```\n\n## Rendering View's content\n\nIn the classes that extends `View` (which will be all your views) to render children elements use `content` method instead of `render`:\n\n```javascript\nclass FooView extends View {\n    content() {\n        return \u003cdiv\u003eHello Foo world!\u003c/div\u003e;\n    }\n}\n```\n\nYou have to do it this way because core class must set correct properties to the inner view component:\n\n```javascript\nexport default class View\u003cP extends ViewProps = ViewProps, S = {}\u003e extends PureComponent\u003cP, S\u003e\n    render(): ReactNode {\n        const content: ReactNode = getProperContent(this.content(), this.props.children);\n\n        return \u003cViewRenderer {...this.getViewProps()}\u003e{content}\u003c/ViewRenderer\u003e;\n    }\n}\n```\n\nIf you would like to overwrite this behaviour, you must do it like this:\n\n```javascript\nimport { getViewProps } from \"airr-react/dist/CommonViewHelpers\";\nimport ViewRenderer from \"airr-react/dist/ViewRenderer\";\n\nclass FooView extends View {\n    render(): ReactNode {\n        return (\n            \u003cViewRenderer {...this.getViewProps()}\u003e\n                {() =\u003e this.myCustomRenderMethodCall()}\n            \u003c/ViewRenderer\u003e\n        );\n    }\n}\n```\n\n## TypeScript support\n\nLibrary is fully typed in TypeScript from version 6.0.0. The declarations files are included in library. Check the corespoding examples below to find out how to use certain types and interfaces with library components. Proper summary of this usage will be added here soon.\n\n## Examples\n\n### Kitchen sink app\n\nGo to example: [Standard](https://codesandbox.io/s/github/rafal-r/airr-react-demo-app), [Typescript](https://codesandbox.io/s/github/rafal-r/airr-react-demo-app-ts)\n\n\u003e Demon app showing all library features.\n\n### Infinite viewport\n\nGo to example: [Standard](https://codesandbox.io/s/github/rafal-r/airr-react-infinite-viewport), [Typescript](https://codesandbox.io/s/github/rafal-r/airr-react-infinite-viewport-ts)\n\n\u003e In this example you can push unlimited views and play with Scene properties.\n\n### Simple Scene\n\nGo to example: [Standard](https://codesandbox.io/s/github/rafal-r/airr-react-simple-scene), [Typescript](https://codesandbox.io/s/github/rafal-r/airr-react-simple-scene-ts)\n\n\u003e Very simple app from 'Usage' chapter.\n\n## Scene API\n\nScene class has many helpfull methods to navigate through views and modify Scene properties. Some properties needs to be modify only by using coresponding methods. Which properties requires this approach is described in [Props documentation](#props-documentation) in 'change with method' column.\n\n### viewsConfig\n\n`viewsConfig: ViewsConfig`\n\n\u003e Class member that keep information about views configuration objects.\n\u003e Every key in this object describes view config.\n\u003e That configuration later will be used to create new view and add it to state views array.\n\u003e Used by ::getFreshViewConfig to deliver new view config.\n\u003e This variable is mainly used in crucial components's ::changeView method.\n\nExample:\n\n```\n  viewsConfig = {\n    \"login-view\": {\n      type: LoginView,\n      props: {\n          handleLoginBtnClick: this.handleLoginBtnClick\n      }\n    },\n    \"home-view\": {\n      type: HomeView,\n      props: {\n          showPopup: this.showNewUserPopup\n      }\n    }\n  }\n```\n\nview\n\n### changeView\n\n`async changeView( view: string | ViewConfig\u003cCommonViewProps\u003e, viewProps: CommonViewProps | {} = {}, sceneProps: SceneProps | {} = {} ): Promise\u003cstring | void\u003e`\n\n\u003e Crucial method of the scene component for manipalutaing views and scene properties and performing animations.\n\u003e Can change active view with animation or just update view and scene properties.\n\u003e Change view by:\n\u003e\n\u003e -   string name kept in state views array which will lead to view change (with animation) or just update if currently active\n\u003e -   string name kept in `this.viewsConfig` which will lead to view push (with animation)\n\u003e -   new view config wich will lead to view change\n\nExamples:\n\n-   Go to another view - [standard](https://codesandbox.io/s/github/rafal-r/airr-react-components-api?module=./src/Scene/ViewsAPI/GoToAnotherView.js\u0026moduleview=1), [typescript](https://codesandbox.io/s/github/rafal-r/airr-react-components-api-ts?module=./src/Scene/ViewsAPI/GoToAnotherView.tsx\u0026moduleview=1)\n-   Push new view from views config - [standard](https://codesandbox.io/s/github/rafal-r/airr-react-components-api?module=./src/Scene/ViewsAPI/PushNewViewFromViewsConfig.js\u0026moduleview=1), [typescript](https://codesandbox.io/s/github/rafal-r/airr-react-components-api-ts?module=./src/Scene/ViewsAPI/PushNewViewFromViewsConfig.tsx\u0026moduleview=1)\n-   Push new view from raw config definition - [standard](https://codesandbox.io/s/github/rafal-r/airr-react-components-api?module=./src/Scene/ViewsAPI/PushNewViewFromRawConfigDefinition.js\u0026moduleview=1), [typescript](https://codesandbox.io/s/github/rafal-r/airr-react-components-api-ts?module=./src/Scene/ViewsAPI/PushNewViewFromRawConfigDefinition.tsx\u0026moduleview=1)\n-   Update current, active view - [standard](https://codesandbox.io/s/github/rafal-r/airr-react-components-api?module=./src/Scene/ViewsAPI/UpdateCurrentView.js\u0026moduleview=1), [typescript](https://codesandbox.io/s/github/rafal-r/airr-react-components-api-ts?module=./src/Scene/ViewsAPI/UpdateCurrentView.tsx\u0026moduleview=1)\n-   Update scene - [standard](https://codesandbox.io/s/github/rafal-r/airr-react-components-api?module=./src/Scene/ViewsAPI/UpdateScene.js\u0026moduleview=1), [typescript](https://codesandbox.io/s/github/rafal-r/airr-react-components-api?module=./src/Scene/ViewsAPI/UpdateScene.tsx\u0026moduleview=1)\n\n### openSidepanel\n\n`openSidepanel(): Promise\u003cboolean | void\u003e`\n\n\u003e Opens sidepanel if was previously defined\n\nExample:\n\n-   Manually open sidepanel - [standard](https://codesandbox.io/s/github/rafal-r/airr-react-components-api?module=./src/Scene/SidepanelAPI/OpenSidepanel.js\u0026moduleview=1), [typescript](https://codesandbox.io/s/github/rafal-r/airr-react-components-api-ts?module=./src/Scene/SidepanelAPI/OpenSidepanel.tsx\u0026moduleview=1)\n\n### hideSidepanel\n\n`hideSidepanel(): Promise\u003cboolean | void\u003e`\n\n\u003e Hides sidepanel\n\nExample:\n\n-   Manually hide sidepanel - [standard](https://codesandbox.io/s/github/rafal-r/airr-react-components-api?module=./src/Scene/SidepanelAPI/HideSidepanel.js\u0026moduleview=1), [typescript](https://codesandbox.io/s/github/rafal-r/airr-react-components-api-ts?module=./src/Scene/SidepanelAPI/HideSidepanel.tsx\u0026moduleview=1)\n\n### openMayer\n\n`openMayer(config: MayerProps): Promise\u003cvoid\u003e`\n\n\u003e Add new mayer to this.state.mayers configurations array.\n\u003e This will immediatelly open new mayer.\n\nExample:\n\n-   Manually open modal layer - [standard](https://codesandbox.io/s/github/rafal-r/airr-react-components-api?module=./src/Scene/MayersAPI/OpenMayer.js\u0026moduleview=1), [typescript](https://codesandbox.io/s/github/rafal-r/airr-react-components-api-ts?module=./src/Scene/MayersAPI/OpenMayer.tsx\u0026moduleview=1)\n\n### closeMayer\n\n`closeMayer(name: string): Promise\u003cvoid\u003e`\n\n\u003e Close mayer by its name.\n\nExamples:\n\n-   Close mayer by prop drilling - [standard](https://codesandbox.io/s/github/rafal-r/airr-react-components-api?module=./src/Scene/MayersAPI/CloseMayer.js\u0026moduleview=1), [typescript](https://codesandbox.io/s/github/rafal-r/airr-react-components-api-ts?module=./src/Scene/MayersAPI/CloseMayer.tsx\u0026moduleview=1)\n-   Close mayer by mayer button config - [standard](https://codesandbox.io/s/github/rafal-r/airr-react-components-api?module=./src/Scene/MayersAPI/CloseMayerFromButtonsConfig.js\u0026moduleview=1), [typescript](https://codesandbox.io/s/github/rafal-r/airr-react-components-api-ts?module=./src/Scene/MayersAPI/CloseMayerFromButtonsConfig.tsx\u0026moduleview=1)\n\n### Other methods\n\nFor more detailed documentation of these methods please go to lib/Scene.tsx file. As everything is typescripted now I hope finding good information will not be a problem.\n\n\u003e getFreshViewConfig - very usefull for getting new view config from viewsConfig variable.\n\n\u003e filterViews - removes views that are not pointed in array.\n\n\u003e popView - go back one view and removes currently active view.\n\n\u003e destroyView - removes view from Scene views property.\n\n\u003e handleBackButton - utility function. Overwrite it in your Scene class to define back button click behaviour. On default it pops view out.\n\n\u003e setSidepanelConfig - special function for enabling sidepanel config after mounting of scene. It will ensure proper sidepanel size (width,height) after incjeting it into DOM.\n\n\u003e disableSidepanel - self explanatory.\n\n\u003e enableSidepanel - self explanatory.\n\n\u003e goToView - action dispatcher method. It will return a function ready to fire view change.\n\n\u003e isValidViewConfig - checks wheter object is valid view config and can be added to view's array.\n\n\u003e hasViewInConfig - checks if view's name is described by some config in `this.viewsConfig` object.\n\n\u003e hasViewInState - checks if view recognized by name argument is present in state.\n\n\u003e getViewIndex - self explanatory.\n\n## Props documentation\n\n### Scene Props\n\n| property                       | type                                      | description                                                                                                                                                                  | change with method                                                                                                                                               |\n| ------------------------------ | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| name                           | string (required)                         | The name of the scene. Must be unique among others views in parent scene. Will be used as identification string                                                              | setState                                                                                                                                                         |\n| activeViewName                 | string                                    | Name of the active view                                                                                                                                                      | setState                                                                                                                                                         |\n| GUIDisabled                    | boolean                                   | Boolean telling if GUI should be disabled meaning no user actions, events are allowed. GUI is disabled via absolute positioned, not visible div that has the biggest z-Index | setState                                                                                                                                                         |\n| GUIDisableCover                | ?ReactNode                                | React element to be placed in GUI disabling div                                                                                                                              | setState                                                                                                                                                         |\n| animation                      | [AnimationType](#animationtype)           | Type of animation to perform when switching views                                                                                                                            | setState                                                                                                                                                         |\n| animationTime                  | number                                    | Time of views changing animation in miliseconds                                                                                                                              | setState                                                                                                                                                         |\n| navbar                         | 1 / true / -1 / 0 / false                 | Specify if navbar is present (1,true) or not (0,false). Or maybe hidden (-1)                                                                                                 | setState                                                                                                                                                         |\n| navbarHeight                   | number                                    | Height of the navbar in pixels                                                                                                                                               | setState                                                                                                                                                         |\n| navbarMenu                     | [?NavbarMenu](#navbarmenu)                | Navbar menu is placed on the right most side. Might contain \"toggleSidepanel\" button or any custom buttons list.                                                             | setState                                                                                                                                                         |\n| navbarClass                    | string                                    | Extra, space separated, navbar's class list                                                                                                                                  | setState                                                                                                                                                         |\n| backButton                     | boolean                                   | Boolean specifing if navbar renders BackButton. Placed by default on the left side of navbar.                                                                                | setState                                                                                                                                                         |\n| backButtonOnFirstView          | boolean                                   | Do you need to still show backButton even if scene is rendering first view from stack?                                                                                       | setState                                                                                                                                                         |\n| handleBackButton               | ?(e: SyntheticEvent\u003cHTMLElement\u003e) =\u003e void | Function that will handle back button click events                                                                                                                           | setState                                                                                                                                                         |\n| handleBackBehaviourOnFirstView | ?() =\u003e void                               | Function that will handle back button clicks events on when first view in stack is active                                                                                    | setState                                                                                                                                                         |\n| sidepanel                      | [?SidepanelConfig](#sidepanelconfig)      | Sidepanels configuration declaration. Must contain two properties: `type` and `props`                                                                                        | setState (for side, sizeFactor, animationTime,bgLayerOpacity), openSidepanel and hideSidepanel (for isShown), enableSidepanel and disableSidepanel (for enabled) |\n| sidepanelVisibilityCallback    | ?(isShown: boolean) =\u003e void               | This function will be called when sidepanel changes it's visibility. It's argument will be isShown bool.                                                                     | setState                                                                                                                                                         |\n| views                          | [ViewConfig[]](#viewconfig)               | Array of `views`. Every view object declaration must contain two properties: `type` and `props`.                                                                             | changeView                                                                                                                                                       |\n| mayers                         | [MayerProps[]](#mayer-props)              | Array of `mayers` objects that will be render into this Scene. Must contain special AirrMayer class properties.                                                              | openMayer, closeMayer                                                                                                                                            |\n| title                          | ReactNode                                 | Title that will be use in parent Scene navbar title section                                                                                                                  | setState                                                                                                                                                         |\n| className                      | string                                    | Extra, space separated classes names to use upon first div element.                                                                                                          | setState                                                                                                                                                         |\n| children                       | ReactNode                                 | Children to be render in Scene's container. Might be useful for creating navigation UI.                                                                                      | setState                                                                                                                                                         |\n| stackMode                      | boolean                                   | This propety changes behaviour of views animation when overlay animation is set                                                                                              | setState                                                                                                                                                         |\n| active                         | boolean                                   | Determine if this scene is active. Set by parent scene. Readonly.                                                                                                            | none                                                                                                                                                             |\n\n### View Props\n\n| property  | type              | description                                                                                                          |\n| --------- | ----------------- | -------------------------------------------------------------------------------------------------------------------- |\n| name      | string (required) | The name of the view. Must be unique among others views in scene. Will be used as identification string              |\n| title     | ReactNode         | Titlebar name. If parent scene navbar is enabled, this title will be showed there. Might be string or React element. |\n| active    | boolean           | Determine if this view is active. Set by parent scene. Readonly.                                                     |\n| className | string            | Extra classes to use. Space separetad string list.                                                                   |\n| style     | ?CSSProperties    | Extra styles to use upon root DOM element of view.                                                                   |\n\n### Sidepanel Props\n\n| property       | name                    | description                                                                                                                                    |\n| -------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |\n| side           | [Placement](#placement) | Side to which sidepanel will be attached                                                                                                       |\n| isShown        | boolean                 | Bool determining if sidepanel is shown or not. Use Scene's methods (openSidepanel,closeSidepanel) to manipulate this bool. Do no set manually. |\n| enabled        | boolean                 | Bool determining if sidepanel is enabled.                                                                                                      |\n| sizeFactor     | number                  | Number between 0 and 1 determining how much size of whole screen sidepanel will take                                                           |\n| animationTime  | number                  | Animation time in miliseconds                                                                                                                  |\n| bgLayerOpacity | number                  | Opacity between 0 and 1                                                                                                                        |\n\n### Mayer Props\n\n| property      | name                                     | description                                                                                         |\n| ------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------- |\n| name          | string (required)                        | The name of the mayer. Must be unique among others mayers in scene. Will be used as identification. |\n| style         | ?CSSProperties                           | Extra styles to apply on Mayer's DOM element                                                        |\n| appearFrom    | [Placement](#placement)                  | Side from which mayer content box will enter                                                        |\n| leaveTo       | [Placement](#placement)                  | Side to which mayer content box will leave                                                          |\n| content       | ?ReactNode                               | Content of mayer                                                                                    |\n| buttons       | ?[MayerButtonProps[]](#mayerbuttonprops) | Array with buttons configuration                                                                    |\n| animationTime | number                                   | Time in miliseconds of mayer's appear/disappear animation                                           |\n\n### Common types\n\n#### AnimationType\n\n`\"slide\" | \"overlay\" | \"fade\"`\n\n#### NavbarMenu\n\n`\"toggleSidepanel\" | ReactNode[]`\n\n#### SidepanelConfig\n\nObject defined with:\n\n| property name |                          type                           |                                                                                             description |\n| ------------- | :-----------------------------------------------------: | ------------------------------------------------------------------------------------------------------: |\n| type          | ComponentClass\u003c[SidepanelProps](#sidepanel-props), any\u003e |            Reference to class or function that will render AirrSidepanel. Might be AirrSidepanel itself |\n| props         |           [SidepanelProps](#sidepanel-props)            | Special properties of AirrSidepanel class. Go to class declaration for further properties documenation. |\n\n#### ViewConfig\n\nObject defined with:\n\n| property name |                      type                      |                                                                                                                                description |\n| ------------- | :--------------------------------------------: | -----------------------------------------------------------------------------------------------------------------------------------------: |\n| type          | ComponentClass\u003c[ViewProps](#views-props), any\u003e | Refference to class or function that will render AirrView. The most common and adviced approach is to specify class that extends AirrView. |\n| props         |           [ViewProps](#views-props)            |                                         Special properties of AirrView class. Go to class declaration for further properties documenation. |\n\n#### Placement\n\n`\"top\" | \"bottom\" | \"left\" | \"right\"`\n\n#### MayerButtonProps\n\n| property  | name                                            | description                                                                 |\n| --------- | ----------------------------------------------- | --------------------------------------------------------------------------- |\n| className | string                                          | Extra class names to use upon button                                        |\n| attrs     | ?CSSProperties                                  | Extra attributes to apply on HTML element                                   |\n| style     | ?CSSProperties                                  | Additional inline styles                                                    |\n| close     | boolean                                         | Optional bool that will automatically add close functionality to the button |\n| handler   | ?(e: SyntheticEvent\u003cHTMLButtonElement\u003e) =\u003e void | OnClick function handler                                                    |\n| children  | ?ReactNode                                      | Content to render inside button element                                     |\n\n## License\n\nLicensed under the MIT License.\nCopyright (c) 2019 Rafal Rajtar\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafal-r%2Fairr-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafal-r%2Fairr-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafal-r%2Fairr-react/lists"}