Nutritious Potato Munchies

    mui-layout-framework
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    mui-layout-framework

    A framework for creating consistent and appealing pages with Material-UI.

    NPM

    Install

    npm install --save mui-layout-framework

    Usage

    Here is a basic example using the Page component:

    import React from "react"
    import Typography from "@material-ui/core/Typography"
    import Button from "@material-ui/core/Button"
    import { Page } from "mui-layout-framework"
     
    const MyPageComponent = (props) => {
        return (
            <Page
                title="Timmy's Animal Rescue"
                content={
                    <div>
                        <Typography variant="body1">
                            Welcome to Timmy's Animal Rescue!
                        </Typography>
                        <Button variant="outlined">Adopt a Pet</Button>
                    </div>
                }
            />
        )
    }
     
    export default MyPageComponent

    From this, you can notice a few things:

    1. The title of the page is automatically handled. React Helmet is set up for you to save the hassle.
    2. You can use any Material-UI components within the content prop.

    Also, behind the scenes, a few things are done for quality-of-life:

    1. Page-structuring tags have been used to aid screen readers - no need to remember the <main> tag anymore!
    2. If you add other supported props, the componenets will work nicely together.

    License

    MIT © RDIL

    Keywords

    none

    Install

    npm i mui-layout-framework

    DownloadsWeekly Downloads

    3

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    18.5 kB

    Total Files

    13

    Last publish

    Collaborators

    • rdil