open-index/open-npm huggingface dataset:
npm package: @rodjosh/react-responsive-props
Description: Is a simple library on top of react-responsive that allows to change component props based on breakpoints
Author: rodjosh
Latest version: 1.0.3

# react-responsive-props

Is a simple library on top of react-responsive that allows to change component props based on breakpoints

## Installation

```
yarn add @rodjosh/react-responsive-props
```

## Usage

```
import { useResponsive } from "@rodjosh/react-responsive-props"

const Text = ({children}) => {
    return <h1>{children}</h1>
}

const App = () => {
    const responsiveComponent = useResponsive();
    
    const ResponsiveText = responsiveComponent<typeof Text>(Text, {
        sm: {
            children: 'Larger phone'
        },
        md: {
            children: 'Tablet'
        },
        lg: {
            children: 'Desktop'        
        },
        xl: {
            children: 'Large Desktop
        }
    });

  return (
    <div>
        <ResponsiveText>
            Phone (Default)
        </ResponsiveText>
    </div>
  );
};
```

To use this library you need to import the `useResponsive` hook, it'll return another function that will create a HOC for the component, in the arguments of the returned function you can pass the desired property per breakpoint. `The passed property when called on the JSX is the default one (whenever is an attribute or a children)`

### useResponsive

The useResponsive hook takes one optional argument, an object with the breakpoints sizes, if no object is passed then it uses the default breakpoints. The breakpoints sizes are in pixels (px). Example:

``` 
useResponsive({
  sm: 320,
  md: 481,
  lg: 769,
  xl: 1025
});
```

### responsiveComponent

This is the returned function of the hook, the name is optional and you can change it at your will. It takes 2 arguments (and a generic type for typescript, simply put `typeof Component` and replace "Component" with the name of your component).

The **first argument** is the component to be affected, and the **second argument** is the properties to be changed per breakpoint on that component.

**NOTE:** all the breakpoints are optionals, and them override the default props, so no matter if it's on the `lg` breakpoint but you only defined the `md` breakpoint, it will still use `md`. This works like a "cascade" where the last props definition it's used on non-defined breakpoints where the "last" defintion are the default props

```
const ResponsiveText = responsiveComponent<typeof Text>(Text, {
  md: {
    children: 'I only show on Tablets'
  }
  xl: {
    children: 'I only show on Desktops'
  }
}); 
```

### Result

Now that we have our `ResponsiveText` defined, we can use it and **ALL** the attributes and children we define will be the "defaults"

```
<ResponsiveText>
    I only show on Phones
</ResponsiveText>
```

## Typescript

This library is typed, so when you define the properties on the breakpoints, you'll get the IDE suggestions and warnings.
npm package: @rodneylab/gatsby-theme-climate
Description: <img src="https://github.com/rodneylab/gatsby-theme-climate/blob/main/images/rodneylab-github-gatsby-theme-climate.png">
Author: Rodney Lab
Latest version: 1.0.2

<img src="https://github.com/rodneylab/gatsby-theme-climate/blob/main/images/rodneylab-github-gatsby-theme-climate.png">

<p align="center">
  <a aria-label="Open Rodney Lab site" href="https://rodneylab.com" rel="nofollow noopener noreferrer">
    <img alt="Rodney Lab logo" src="https://rodneylab.com/assets/icon.png" width="60" />
  </a>
</p>
<h1 align="center">
  Gatsby 3 Theme Climate
</h1>

## Description

Boilerpate code for a <a aria-label="Vist the Gatsby website" href="https://www.gatsbyjs.org" rel="nofollow">Gatsby 3</a> blog using <a aria-label="Vist the Gatsby website" href="https://www.netlify.com/" rel="nofollow">Netlify</a> for hosting.  Based on principles of:

- Accessibility
- Security
- Speed

Features:
- Optimised for Gatsby 3 - using File Route API, new Gatsby 3 Image Plugin
- 100% score of Lighthouse accessibility 
- Axe clean &mdash; no accessibility warnings on running axe tool
- High lighthouse speed scores
- A or higher security rating for headers from securityheaders.com
- Correct use of semantic HTML (only one `<h1>` per page, sections and posts use `<section>` and `<article>` correctly etc.).

## Dependencies

Climate needs `gatsby`, `react` and `react-dom`:



## Learning Resources

## How to Install
```bash
npm install gatsby-theme-climate gatsby react react-dom
```

or

```bash
yarn add gatsby-theme-climate gatsby react react-dom
```

## Available Options

There are currently no available options.

## When do I Use this Plugin?

Climate is a great theme for writing an MDX blog in Gatsby v3.

## Examples of Usage

- Copy `.env.EXAMPLE` to `.env.development` and `.env.production` and customise.
- Edit `config/website.js` with your site details.
- Replace the sample blog posts in `content/blog` with your own awesome posts.

## How to Run Tests

Not currently implemented.

## How to Develop Locally

```bash
gatsby develop
```

## How to Contribute

Please see [CONTRIBUTING.md](https://github.com/rodneylab/gatsby-theme-climate/blob/main/.github/CONTRIBUTING.md)