styled-injector v0.0.3

Styled-Injector

Styled-Injector is a lightweight utility for React UI-toolkit maintainers that wish to use a styled-api, but don't wish to require their users to use a specific styled-api.

This way, if one user is using emotion and another is using styled-components, they can both use the same UI-toolkit without having to install a second CSS-in-JS library.

Note

This package is intended for maintainers of React UI-toolkits, and is likely not useful for anyone building an app.

Usage

// src/styled.ts

import styled from "styled-components";
import { createStyled } from "styled-injector";

export const Styled = createStyled(styled);

// src/list.tsx

import Styled from "./styled";

const { styled } = Styled;

const List = styled.ul`
	list-style-type: none;
	width: 200px;
	padding: 0;
	margin: 0;
	box-shadow: 0 0 4px black;
`;

const ListItem = styled.li`
	display: flex;
	align-items: center;
	border-bottom: 1px solid lightgray;
	height: 40px;
	padding-left: 12px;
`;

// src/app.tsx

import Styled from "./styled";
import { List, ListItem } from "./list";

const { Provider } = Styled;

const App = () => {
	return (
		<Provider>
			<List>
				<ListItem>Apple</ListItem>
				<ListItem>Banana</ListItem>
				<ListItem>Cherry</ListItem>
			</List>
		</Provider>
	);
};