react-css

Use the power of ES6 and CSS to style your react apps without stress

Getting Started

react-CSS allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – simply it is the alternative to the styled-components if you searching for a mini package do the same job that the styled-compoents does.

Installing

npm

npm i @wasim.almadfaa/react-css

yarn

yarn add @wasim.almadfaa/react-css

github

git clone https://github.com/wm-madfaa/react-css.git

or you can copy and pest it in your project as a normal component!

import  React, { createContext, Fragment } from  "react";
import  PropTypes  from  "prop-types";
import { createPortal } from  "react-dom";
const { Provider, Consumer } =  createContext({ theme: {} });

const  Theme  = ({ value  = {theme:  {}},  children }) => (
	<Provider  value={value}>{children}</Provider>
);

const  Styled  =  props  => {
	const { css, children, ...rest } =  props;
	const  hashPrefix  =  Math.random().toString(32).slice(-8);

	return (

		<Fragment>

			<Consumer>

				{themes  =>

					createPortal(

					<style  type="text/css">

					{props.css(hashPrefix, rest, themes.theme)}

					</style>,

					document.head

					)

				}

			</Consumer>

			{children(hashPrefix)}
		</Fragment>

	);

};

Styled.propTypes  = {
css:  PropTypes.func.isRequired,
children:  PropTypes.func.isRequired
};
export { Styled  as  default, Theme };

Getting Started

Adapting based on props

use Es6 (template literals) to include js code within the css code.

import Styled from 'Styled';

const css = (prefix,props) =>`
	componentName-${prefix}{
		color: ${props.color}
	}
`
function Component(props){
	return(
		<Styled css={css} color={props.color}>
			{prefix => 
				<div className={`componentName-${prefix}`}>
					Lorem ipsum dolor sit amet
				</div>
			}
		</Styled>
	)
}

Extending Styles

To easily make a new component that inherits the styling of another.

import Styled from 'Styled';

const css_1 = (prefix,props) =>`
	text-color-${prefix}{
		color: ${props.color}
	}
`

function Component_1(props){
	return(
		<Styled css={css_1} color={props.color}>
			{prefix => 
				<div className={`css_1-${prefix}`}>
					Lorem ipsum dolor sit amet
				</div>
			}
		</Styled>
	)
}

const css_2 = (prefix,props) =>`
	background-color-${prefix}{
		background: ${props.background}
	}
	${css_1(prefix,props)}
`

function Component_2(props){
	return(
		<Styled css={css_1} color={props.color} background={props.background}>
			{prefix => 
				<div className={`css_2-${prefix}`}>
					Lorem ipsum dolor sit amet
				</div>
			}
		</Styled>
	)
}

Theming

react-css has full theming support by exporting a wrapper component. This component provides a theme to all React components underneath itself via the context API. In the render tree all styled-components will have access to the provided theme, even when they are multiple levels deep.

import Styled, {Theme} from 'Styled';

const css_1 = (prefix,props, theme) =>`
	text-color-${prefix}{
		color: ${props.color};
		font-size: ${theme.fontSize}
	}
`

function Component_1(props){
	return(
		<Styled css={css_1} color={props.color}>
			{prefix => 
				<div className={`css_1-${prefix}`}>
					Lorem ipsum dolor sit amet
				</div>
			}
		</Styled>
	)
}

const css_2 = (prefix,props, theme) =>`
	background-color-${prefix}{
		background: ${props.background}
		font-size: ${theme.fontSize}
	}
	${css_1(prefix,props, theme)}
`

function Component_2(props){
	return(
		<Styled css={css_1} color={props.color} background={props.background}>
			{prefix => 
				<div className={`css_2-${prefix}`}>
					Lorem ipsum dolor sit amet
				</div>
			}
		</Styled>
	)
}

function Root (props){
	return (
		<Theme value={{theme: {
			fontSize: '14px'
		}}}>
			<Component_1 />
			<Component_2 />
		</Theme>
	)
}

Authors

• Wasim Almadfaa
  email: [email protected]

License

This project is licensed under the GNU General Public License - see the LICENSE.md file for details