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 🙏

© 2022 – Pkg Stats / Ryan Hefner

@guardian/source-react-components

v5.0.0

Published

[![npm](https://img.shields.io/npm/v/@guardian/source-react-components)](https://www.npmjs.com/package/@guardian/source-react-components)

Downloads

6,516

Readme

@guardian/source-react-components

npm

A set of robust, accessible React components built using @guardian/source-foundations.

Install

$ yarn add @guardian/source-react-components

or

$ npm install @guardian/source-react-components

You must install react, @emotion/react and @guardian/source-foundations to use Source components.

Example

import { TextInput, Button } from '@guardian/source-react-components';

const Form = () => (
    <form>
        <TextInput label="First name" />
        <Button>Submit</Button>
    </form>
);

Theming

By default, all components are styled using their light theme.

To apply a different theme, we recommend using Emotion's theming API. You can import the desired theme from @guardian/source-react-components

To compose a theme for specific components:

import { ThemeProvider } from '@emotion/react';
import {
    Button,
    buttonThemeBrand,
    TextInput,
    textInputThemeBrand,
} from '@guardian/source-react-components';

const Form = () => (
    <ThemeProvider theme={{ ...buttonThemeBrand, ...textInputThemeBrand }}>
        <form>
            <TextInput label="First Name" />
            <Button>Click me</Button>
        </form>
    </ThemeProvider>
);

Available themes

Standard themes available from @guardian/source-react-components:

  • default – exported as [componentName]ThemeDefault
  • brand – exported as [componentName]ThemeBrand
  • brandAlt – exported as [componentName]ThemeBrandAlt

To find out which themes a component supports, check its stories under Packages/source-react-components/<ComponentName>

Note that some components have their own unique themes in addition to the standard set of themes. For instance, the button component defines two themes for use in Reader Revenue flows.

Overriding styles

To extend or override the styles of Source components, pass SerializedStyles generated by the css function to the cssOverrides prop.

import { css } from '@emotion/react';

const dangerStyles = css`
    background-colour: ${palette.error[500]};
    color: ${palette.neutral[100]};

    &:hover {
        background-colour: ${palette.error[400]};
    }
`;

const Danger = () => (
    <Button cssOverrides={dangerStyles}>Delete my account</Button>
);

The cssOverrides prop is mixed into the css prop for the main element of the component. This differs from component to component. You'll need to look at the source code for the component to see where your overrides will be applied.

Using classNames

If you are using a CSS solution that relies on passing the className prop, you can pass your className to the Source component as normal.

One caveat here is that @emotion/react, which Source components use for styling, appends style tags to the bottom of the document head. Since they appear at the end of the cascade, they tend to override other styles unless the other styles have a higher specificity.

You may therefore need to mark overrides as !important in order to ensure they are applied.