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

@invisionag/iris-react-views

v3.2.2

Published

```js import Views from '@invisionag/iris-react-views'; ```

Downloads

126

Readme

import Views from '@invisionag/iris-react-views';

react-views is a bundle of layout components that wrap other components to standardise pages.

Usage

View

This component provides the outer frame for all content that is being displayed as part of the injixo web applications (excluding text heavy content like the injixo.com website, the blog and injixo docs).

Except the navigation elements of injixo, everything else has to be placed inside this container component.

There are two distinct versions of the container that should cover all usecases. In other words, every single page inside injixo has to use that content container component to ensure consistency across apps.

What to consider

  • Content inside the container has to adhere to the inner spacing of 1rem to the container element
  • Do not create any additional offsets or layouts inside the container, i.e. place content at top left corner inside the container

Breakpoints for media queries

According to the usage statistics of injixo, there are only two relevant screen widths to consider:

  1. Small / Mobile: below 768px
  2. Large / Desktop: 768px or wider

Keep in mind, that the mobile usage almost completely comes from injixo Me. This means that injixo Me has to be designed with that target group in mind. Every other injixo component must not be broken on mobile screens but can be designed based on the graceful degradation approach. This means, we deliver a reasonable user experience on mobile devices, but for example with a reduced feature set, read-only view or a reduced information density.

Variants

1. Full width

import { View } from '@invisionag/iris-react-views';

<View>
  This is the page content
</View>

To be used when

  • There is a lot of space needed to display relevant information
  • Other full width elements such as a toolbar or a sidebar are part of the page
  • Screens are small (mobile). It is the only option to display content on mobile screens

Constraints

  • This is the only available layout option for small/mobile screens

Characteristics

  • There is no offset on either side around the content container

2. Centered

import { View } from '@invisionag/iris-react-views';

<View centered>
  This is the page content
</View>

To be used when

  • The space needed is limited, i.e. there would be an inbalance when content is being positioned at the top most left corner and the right section of the page would be almost empty

Constraints

  • Screen has to be large/desktop. Centered layout must not be used on mobile screens to avoid loosing limited space

Characteristics

  • Content container is limited to 1200px maximum width
  • Below 1200px the content consumes 10 out of 12 columns or approx. 80% of the full page width

ViewWithSidebar

Simply pass your view component as a child and your sidebar as a prop to layout your page.

import { ViewWithSidebar } from '@invisionag/iris-react-views';

<ViewWithSidebar sidebar={<SomeDrawer />}>
  This is the page content
</ViewWithSidebar>