npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

material-ui-appframe

v0.1.13

Published

Responsive application frame for Material UI web applications

Downloads

3

Readme

Material UI AppFrame: Responsive layout components for Material UI Applications

Material UI is an implementation of Google's Material Design for projects using the React web development library. This library provides additional high level components for building the core layout of your application. Material UI AppFrame allows you to spend less time reinventing the wheel and more time focusing on what really matters.

npm install material-ui-appframe @material-ui/core @material-ui/icons

To get started, see the sample projects in the examples directory

At this time, the main features are:

  • High level components such as Navigation, TitleBar and MainContent that let you cleanly describe the core layout and structure of your application (see examples below)
  • Responsive layout (optionally based on CSS3 grid)
  • Navigation drawer with support for collapse menus and a custom CSS based swipeable drawer for mobile devices
  • Bottom navigation bar for mobile devices
  • Routing with React router
  • Support for customization with Material UI theme options. (Everything aims to be customizable according to Material UI conventions. We also set the mobile browser's address bar color to match your Material UI Theme color.)
  • Custom implementation of Styled components that lets you style components with TypeScript and access Material UI's theme
  • Right-to-left (RTL) support
  • Extra convenience components for common screnarios such as TitleBar, Title, TitleBarSearch with more to come
  • Experimental: Nested navigation ("activities") using full screen dialogs on mobile devices
  • Supports TypeScript out of the box - fully implemented in TypeScript

Todo:

  • Testing, testing, testing
  • Test and improve customization options

See it in action

The layout components provided by Material UI AppFrame make it straightforward to describe the layout, navigation and routing of your application while keeping the code readable. The basic structure is as follows:

const App = () => (
    <AppFrame>
        <TitleBar>
            {/* Place the contents of your title bar (App Bar) here. */}
        </TitleBar>

        <Navigation>
            {/* Place your navigation components here. */}
        </Navigation>

        <MainContent>
            {/* Place the main content of your app here. If your app has multiple views and you're
                    using a static title bar, this is a good place to add routes to different views. */}
        </MainContent>

        <BottomNavigation mobileOnly>
            {/* Bottom navigation for mobile devices. */}
        </BottomNavigation>
    </AppFrame>
)

For a more complete example please see the demo. More examples will be coming soon.

Customization

What if you want to change the page to dark, that title bar to orange and the font of the title to something else? You're in luck because you've got plenty of options.

Theme

Material UI has a powerful concept of Themes, which is also fully embraced by AppFrame components.

Many of the desired visual changes to your application may be accomplished just by changing the theme.

To use a custom theme, simply wrap the AppFrame component in a ThemeProvider.

A good practice is to split your JSX tree early on into Providers and the actual App.

index.tsx:

ReactDOM.render(
	<Providers>
		<App />
	</Providers>,
	document.getElementById("root")
)

Providers.tsx:

/**
 *  Place providers, such as those provided by state management libraries here.
 */

interface Props {
	children: React.ReactNode
}

export const Providers = (props: Props) => (
	<MuiThemeProvider
		theme={createMuiTheme({
            /**
             * Theme options go here.
             */
			palette: { type: "dark" }
		})}
	>
		{props.children}
	</MuiThemeProvider>
)

With these changes, we can see that the apprearance of the page has already changed.

For a more fine-grained customization, the AppFrame components implement customization in a similar way to Material UI components.

Styled components

For your convenience, Material UI AppFrame implements the popular Styled components pattern in a way that allows you to take advantage of TypeScript's strong typing and Material UI's theme. See example in demo.

Injected classNames and classname overriding

If you need even more control, you can override classNames used by AppFrame components.