react-pattern
Advanced tools
+1
-1
| { | ||
| "name": "react-pattern", | ||
| "version": "0.1.1", | ||
| "version": "0.1.2", | ||
| "description": "A React pattern matching component for conditional renders", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
+35
-0
| # React Pattern | ||
| A React pattern matching component for conditional rendering. | ||
| ## Usage | ||
| First install the component. | ||
| ```sh | ||
| npm install --save react-pattern | ||
| ``` | ||
| Then, import it and use it. | ||
| ```js | ||
| import React from 'react' | ||
| import Switch from 'react-pattern' | ||
| const { Case } = Switch | ||
| const App = ({ isFetching, error }) => ( | ||
| <Switch value={isFetching}> | ||
| <Case when={true}> | ||
| <p>Is loading the data</p> | ||
| </Case> | ||
| <Case default> | ||
| <Switch value={typeof error}> | ||
| <Case when="object"> | ||
| {() => <p>{error.message}</p>} | ||
| </Case> | ||
| <Case default> | ||
| <p>App loaded without errors.</p> | ||
| </Case> | ||
| </Switch> | ||
| </Case> | ||
| </Switch> | ||
| ) | ||
| ``` |
5716
12.1%39
875%