@code.z/react-fixed-align v1.0.1

react-fixed-align is a very simple react component to create fixed positioned, full width and full height wrappper components. It uses position: fixed and display: flex internally which you could do easily by yourself. Really its that simple. But if you are lazy enough (like me 🥱) to repeat this in so many screens in your apps you could use the plugin. 😀✌️

Example

import React from "react";
import FixedScreen from "@code.z/react-fixed-align";
import classNames from "./App.module.scss";

function App() {
  return (
    <FixedScreen xAlign="center" yAlign="middle" className={classNames.wrapper}>
      <div style={loginStyles}>
        <h1>Login</h1>
        <input style={inputStyles} type="email" placeholder="email" />
        <input style={inputStyles} type="password" placeholder="password" />
        <button>Login</button>
      </div>
    </FixedScreen>
  );
}

export default App;

Note: If you set middleAlign to true then xAlign and yAlign will be ignored.

ENJOY 😀🤚