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

@monstrosity/components

v0.43.0-alpha-10

Published

Typescript React Component Library

Downloads

3

Readme

React Component Library

storybook

Requires React 16.8+

Themes

Monstrosity ships with two default themes

  1. Light
  2. Dark

A custom theme can be provided by providing a theme of type Theme. If you are using js you will need to look here for the correct object schema.

The best way to consume these components is by using the provider. This way you get the theme as designed by the creator in either a dark or light mode and with correct fonts.

examples

import { ThemedProvider } from '@monstrosity/utilities/providers/theme';
import { BarButton } from '@monstrosity/components/core';
import { ButtonStyle } from '@monstrosity/enums/button-style';

render() {
  return (
    <ThemedProvider isDark>
        <Container>
            <BarButton
                onClick={onClick}
                buttonStyle={ButtonStyle.Secondary}
                id="1"
                label="Click Me"
            />
        </Container>
    </ThemedProvider>
  )
}

Please note that a single item must be parsed into the provider (due to the way ThemeProvider functions). To use multiple components wrap the children in a parent ie <React.Fragment> ... </React.Fragment>.

Using a component

All components must be wrapped in the styled components theme provider. I recommend that this is done at the highest possible level. The theme property is then passed to every child component behind the scenes.

This can be done by adding a decorator to your storybook config.

addDecorator(( story ) => (
  <ThemeProvider theme={MyTheme}>
    { story() }
  </ThemeProvider>
))

Or in the application root.

class ApplicationRoot extends React.PureComponent {

  render() {
    return (
      <ThemeProvider theme={MyTheme}>
        /* Application */
      </ThemeProvider>
    );
  }
}

With other providers.

class ApplicationRoot extends React.PureComponent {

  render() {
    return (
      <Provider store={MyStore}>
        <ThemeProvider theme={MyTheme}>
          /* Application */
        </ThemeProvider>
      </Provider>
    );
  }
}

However you can also directly supply a theme to a component if you so choose.

<Icon theme={MyTheme} icon={IconName.Folder} />

Or by wrapping a single component in a provider.

<ThemeProvider theme={MyTheme}>
  <Icon icon={IconName.Folder} />
</ThemeProvider>

Button Example

import React from 'react';
import ReactDOM from 'react-dom';

import { BarButton } from '@monstrosity/components/core';
import { ThemeProvider } from '@monstrosity/utilities/themed-components';
import { Light } from '@monstrosity/utilities/themed-components/light';

const Demo = () => { 
  const onClick = (id) => alert(id);

  return (
    <ThemeProvider theme={Light}>
      <BarButton
        id="3"
        label="Click on me"
        onClick={onClick}
        buttonStyle={ButtonStyle.Primary}
        isSlim
      />
    </ThemeProvider>
  )
};

ReactDOM.render(<Demo />, document.getElementById('root'));

Attribution

Avatar Icons made by Freepik from flaticon.com.
Remix Icons by Remix. Bootstrap Icons by Bootstrap.
Font Awesome Free Icons by Font Awesome.
Feather Icons by Feather.

Tyson Skiba 2019