jrs-react-components-themes
v1.1.4
Published
Pass one the following themes to a [JRS React Component](https://github.com/jrs-innovation-center/jrs-react-components) and achieve ultimate [tachyons](http://tachyons.io/) css styling goodness for the win!
Downloads
9
Readme
JRS React Components Themes
Pass one the following themes to a JRS React Component and achieve ultimate tachyons css styling goodness for the win!
Available themes
Install
npm install jrs-react-components-themes --save
Showcase
Our showcase displays the various available themes applied to our JRS React Components.
Code Example
The code example uses the List
,ImageListItem
, and Button
components from jrs-react-components along with the dark theme. Components may optionally be passed a themeStyles
object as props. themeStyles
provides the tachyons css classes to the component.
import React from 'react'
import {
List,
ImageListItem,
Button
} from 'jrs-react-components'
import {dark} from 'jrs-react-components-themes'
const ExampleTheme1 = (props) => {
return (
<div className='pa4'>
<h1 className='tc'>Theme Example 1</h1>
<h2 className=''>List and ImageListItem</h2>
<List themeStyles={dark.themeStyles}>
<ImageListItem themeStyles={dark.themeStyles}
title='Hello'
image='http://fillmurray.com/100/100'
link={<Button onClick={e => alert('Check out fillmurray.com')}>Click Here</Button>}
/>
</List>
</div>
)
}
export default ExampleTheme1
Tip! You can modify themes with the ThemeManager. See jrs-react-components Theme Manager.
Exploring a theme object
Here's a partial look at the structure of the dark
theme object:
const dark = {
themeName: 'dark',
themeStyles: {
panelBorder: `ba ${borderRound} ${backgroundColor} ${childBorderColor}`,
panelHeader: `${paddingAll} ${backgroundColor} ${textColor}`,
panelH2: `${h2}`,
panelChildrenSection: `${paddingAll} ${backgroundColor}`,
panelFooter: `${paddingAll} ${backgroundColor} ${textColor}`,
panelButtonDiv: `fr`,
panelButton: `ba dim ${paddingAll} ${backgroundColor} ${textColor}`,
listUl: `list pl0 mt0 measure ba br2 b--black-10`,
... remaining themeStyles keys omitted for brevity ...
A theme object contains a themeName
and a themeStyles
object. The former is used to identify the theme. themeStyles
contains a series of key and value pairs. Each key is used within a particular jrs-react-components. For example, the listUl
key contains the tachyons css style classes for the List component's <ul>
tag.
License
MIT
Contributions
Contributions are welcome, all code is styled using standard and formatted using prettier.