https://github.com/itsjonq/styled-providers

✨ Handy Providers for Emotion / Styled Components
https://github.com/itsjonq/styled-providers

emotion providers react styled styled-components

Last synced: 2 months ago
JSON representation

✨ Handy Providers for Emotion / Styled Components

• Host: GitHub
• URL: https://github.com/itsjonq/styled-providers
• Owner: ItsJonQ
• License: mit
• Created: 2019-11-25T18:23:39.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T15:37:01.000Z (almost 2 years ago)
• Last Synced: 2024-10-02T04:42:08.758Z (3 months ago)
• Topics: emotion, providers, react, styled, styled-components
• Language: JavaScript
• Homepage:
• Size: 1.66 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ✨ Styled Providers

[![Build Status](https://travis-ci.org/ItsJonQ/styled-providers.svg?branch=master)](https://travis-ci.org/ItsJonQ/styled-providers)

> Handy Providers for Emotion / Styled Components

-   [Installation](#installation)

-   [Requirements](#requirements)

-   [Usage](#usage)

    -   [Emotion](#emotion)

    -   [Styled Components](#styled-components)

-   [Components](#components)

    -   [FrameProvider](#frameprovider)

    -   [ScopeProvider](#scopeprovider)

## Installation

```

npm install --save styled-providers

```

## Requirements

-   [React v16.8.0+](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html)

-   [Emotion v10+](https://emotion.sh/docs/migrating-to-emotion-10) **or** [Styled Components v5+](https://medium.com/styled-components/announcing-styled-components-v5-beast-mode-389747abd987)

## Usage

[Emotion](https://emotion.sh/) and [Styled Components](https://www.styled-components.com/) are supported.

### Emotion

```jsx

import React from "react";

import styled from "@emotion/styled";

import { ScopeProvider } from "styled-providers/emotion";

const View = styled.div`

	background: blue;

`;

const App = () => {

	return (

		


			

				

			

		

	);

};

```


### Styled Components

```jsx

import React from "react";

import styled from "styled-components";

import { ScopeProvider } from "styled-providers/styled-components";

const View = styled.div`

	background: blue;

`;

const App = () => {

	return (

		


			

				

			

		

	);

};

```


## Components

### FrameProvider

Provides the correct document.head to mount the `` tag for either Emotion or Styled Components. This is necessary when rendering CSS-in-JS generated styles within elements like iFrames on runtime.

##### Example

```jsx

import React from "react";

import styled from "@emotion/styled";

import { FrameProvider } from "styled-providers/emotion";

import Frame from "react-frame-component";

const View = styled.div`

	background: blue;

`;

const App = () => {

	return (

		<Frame>

			<FrameProvider>

				<View />

			</FrameProvider>

		</Frame>

	);

};

```

### ScopeProvider

Provides a scope to prefix before generated classNames for either Emotion or Styled Components. Prefixing increases specificity, allowing for smoother integrations with pre-existing CSS rules.

##### Example

```jsx

import React from "react";

import styled from "@emotion/styled";

import { ScopeProvider } from "styled-providers/emotion";

const View = styled.div`

	background: blue;

`;

const App = () => {

	return (

		<div id="#app">

			<ScopeProvider scope="html #app">

				<View />

			</ScopeProvider>

		</div>

	);

};

```

In the above example, rendered selectors (e.g. `.css-123jda`) will be prefixed with `html #app`, resulting in selectors like `html #app .css-123jda`)