react-jss docs improvements

cssinjs · Sep 22, 2019 · 2912127 · 2912127
1 parent 5925f4e
commit 2912127
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 110 deletions.
diff --git a/docs/intro.md b/docs/intro.md
@@ -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
 
@@ -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: {
@@ -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
 })
 
-// Composition.
-const PrimaryButton = styled(Button)({
-  color: 'red'
-})
+const Button = ({children}) => {
+  const classes = useStyles()
+  return (
+    <button className={classes.myButton}>
+      <span className={classes.myLabel}>{children}</span>
+    </button>
+  )
+}
 
-// Composition with unstyled React Components too.
-const UnstyledButton = () => <button>Unstyled</button>
-const Button2 = styled(UnstyledButton)({
-  color: 'blue'
-})
+const App = () => <Button>Submit</Button>
 
-// Component Selectors.
-const ButtonContainer = styled(Container)({
-  [`& ${PrimaryButton}`]: {
-    color: 'green'
-  }
-})
+render(<App />, document.getElementById('root'))
 ```
diff --git a/docs/react-jss.md b/docs/react-jss.md
@@ -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
 
@@ -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>
@@ -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.
@@ -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>
 }
 
@@ -314,7 +270,7 @@ const otherLibraryTheme = {}
 const App = () => (
   <OtherLibraryThemeProvider theme={otherLibraryTheme}>
     <OtherLibraryComponent />
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={myTheme}>
       <Button>Green Button</Button>
     </ThemeProvider>
   </OtherLibraryThemeProvider>