Skip to content

Commit

Permalink
react-jss docs improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@kof
kof committed Sep 22, 2019
1 parent 5925f4e commit 854678c
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 111 deletions.
64 changes: 13 additions & 51 deletions docs/intro.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ If you’re interested in playing around with JSS, you can use an online code pl

- [JSS](https://codesandbox.io/s/z21lpmvv33)
- [React-JSS](https://codesandbox.io/s/j3l06yyqpw)
- [Styled-JSS](https://codesandbox.io/s/xl89zx8zz4)

## Online Compiler

Expand Down Expand Up @@ -82,11 +81,11 @@ document.body.innerHTML = `
```javascript
import React from 'react'
import {render} from 'react-dom'
import injectSheet from 'react-jss'
import {createUseStyles} from 'react-jss'

// Create your Styles. Remember, since React-JSS uses the default preset,
// most plugins are available without further configuration needed.
const styles = {
const useStyles = createUseStyles({
myButton: {
color: 'green',
margin: {
Expand All @@ -104,55 +103,18 @@ const styles = {
myLabel: {
fontStyle: 'italic'
}
}

const Button = ({classes, children}) => (
<button className={classes.myButton}>
<span className={classes.myLabel}>{children}</span>
</button>
)

// Finally, inject the stylesheet into the component.
const StyledButton = injectSheet(styles)(Button)

const App = () => <StyledButton>Submit</StyledButton>

render(<App />, document.getElementById('root'))
```

## Styled-JSS Example

```javascript
import React from 'react'
import styled from 'styled-jss'

const Button = styled('button')({
fontSize: 12,
color: props => props.theme.textColor
})

// You can also use curried interface this way.
const div = styled('div')

const Container = div({
padding: 20
})
const Button = ({children}) => {
const classes = useStyles()
return (
<button className={classes.myButton}>
<span className={classes.myLabel}>{children}</span>
</button>
)
}

// Composition.
const PrimaryButton = styled(Button)({
color: 'red'
})
const App = () => <Button>Submit</Button>

// Composition with unstyled React Components too.
const UnstyledButton = () => <button>Unstyled</button>
const Button2 = styled(UnstyledButton)({
color: 'blue'
})

// Component Selectors.
const ButtonContainer = styled(Container)({
[`& ${PrimaryButton}`]: {
color: 'green'
}
})
```
render(<App />, document.getElementById('root'))
```
76 changes: 16 additions & 60 deletions docs/react-jss.md
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
# JSS integration with React

React-JSS integrates [JSS](https://github.com/cssinjs/jss) with React using the new Hooks API as well as a Styled Component API. JSS and the [default preset](https://github.com/cssinjs/jss/tree/master/packages/jss-preset-default) are already built in.
React-JSS integrates [JSS](https://github.com/cssinjs/jss) with React using the new Hooks API. JSS and the [default preset](https://github.com/cssinjs/jss/tree/master/packages/jss-preset-default) are already built in.

Try it out in the [playground](https://codesandbox.io/s/j3l06yyqpw).

**HOC based API is deprecated as of v10 and will be removed in v11. HOC specific docs are available [here](./react-jss-hoc.md).**
**HOC based API is deprecated as of v10 and will be removed in v11. You can still make a lazy migration like described [here](https://reacttraining.com/blog/using-hooks-in-classes/). HOC specific docs are available [here](./react-jss-hoc.md).**

Benefits compared to using the core JSS package directly:
### Benefits compared to using the core JSS package directly:

- Dynamic Theming - allows context based theme propagation and runtime updates.
- Critical CSS extraction - only CSS from rendered components gets extracted.
- Lazy evaluation - Style Sheets are created when a component mounts and removed when it's unmounted.
- The static part of a Style Sheet will be shared between all elements.
- Function values and rules are updated automatically with props as an argument.
- Function values and rules are updated automatically with any data you pass to `useStyles(data)`. You can pass props, state or anything from context for example.

## Table of Contents

Expand Down Expand Up @@ -196,17 +196,18 @@ Usage of `ThemeProvider`:
import React from 'react'
import {createUseStyles, useTheme, ThemeProvider} from 'react-jss'

const useStyles = createUseStyles(theme => ({
const useStyles = createUseStyles({
button: {
background: theme.colorPrimary
background: ({theme}) => theme.colorPrimary
},
label: {
fontWeight: 'bold'
}
}))
})

const Button = ({children, ...props}) => {
const classes = useStyles(props)
const theme = useTheme()
const classes = useStyles({...props, theme})
return (
<button className={classes.button}>
<span className={classes.label}>{children}</span>
Expand All @@ -225,51 +226,6 @@ const App = () => (
)
```

## Accessing the theme inside the styled component

Use `useTheme()` hook to access the theme inside of the function component.

```javascript
import React from 'react'
import {createUseStyles, useTheme, ThemeProvider} from 'react-jss'

const useStyles = createUseStyles(theme => ({
button: {
background: theme.colorPrimary
},
label: {
fontWeight: 'bold'
}
}))

const DeleteIcon = () => null

const Button = ({children, ...props}) => {
const classes = useStyles(props)
const theme = useTheme()
return (
<button className={classes.button}>
<span className={classes.label}>{children}</span>
{theme.useIconButtons && <DeleteIcon />}
</button>
)
}
```

## Accessing the theme without styles

In case you need to access the theme without rendering any CSS, you can also use `useTheme()` standalone.

```javascript
import React from 'react'
import {useTheme} from 'react-jss'

const Button = () => {
const theme = useTheme()
return <button>I can access {theme.colorPrimary}</button>
}
```

## Using custom Theming Context

Use _namespaced_ themes so that a set of UI components gets no conflicts with another set of UI components from a different library also using `react-jss` or in case you want to use the same theme from another context that is already used in your app.
Expand All @@ -287,22 +243,22 @@ const theming = createTheming(ThemeContext)
const {ThemeProvider, useTheme} = theming

const useStyles = createUseStyles(
theme => ({
{
button: {
background: theme.colorPrimary
background: ({theme}) => theme.colorPrimary
}
// Passing theming object to `createUseStyles()`
}),
},
{theming}
)

const theme = {
const myTheme = {
colorPrimary: 'green'
}

const Button = ({children, ...props}) => {
const classes = useStyles(props)
const themeOverContext = useTheme() // In case you need to access the theme here.
const theme = useTheme()
const classes = useStyles({...props, theme})
return <button className={classes.button}>{children}</button>
}

Expand All @@ -314,7 +270,7 @@ const otherLibraryTheme = {}
const App = () => (
<OtherLibraryThemeProvider theme={otherLibraryTheme}>
<OtherLibraryComponent />
<ThemeProvider theme={theme}>
<ThemeProvider theme={myTheme}>
<Button>Green Button</Button>
</ThemeProvider>
</OtherLibraryThemeProvider>
Expand Down

0 comments on commit 854678c

Please sign in to comment.