Skip to content
This repository was archived by the owner on Jun 2, 2024. It is now read-only.

Commit 9115706

Browse files
csvenkecsvenke
authored
Adds documentation with react-styleguidist (#10, #11)
* Adds styleguidist documentation (#10) * Renamed Map component to Link (#11 )
1 parent 050b44d commit 9115706

File tree

21 files changed

+5658
-220
lines changed

21 files changed

+5658
-220
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
# workspace
1111
.vscode
12+
/styleguide
1213

1314
# misc
1415
.DS_Store

‎README.md‎

Lines changed: 10 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<p align="center">
2020
<a href="#installation">Installation</a> •
2121
<a href="#example-usage">Example usage</a> •
22-
<a href="#api">API</a> •
22+
<a href="#documentation">Documentation</a> •
2323
<a href="#development-setup">Development setup</a> •
2424
<a href="#contributing">Contributing</a> •
2525
<a href="#license">License</a>
@@ -29,20 +29,18 @@ Are you tired of your react components looking like an unreadable mess?
2929
Have you often asked yourself: "there must be a better way!"?
3030
Then look no further, because this library is just what you need!
3131

32-
Multiple studies from reputable anonymous sources have shown that projects using `react-semantics` have 24% higher productivity and increased life satisfaction.
32+
Multiple studies from reputable anonymous sources have shown that projects using this library have 24% higher productivity and increased life satisfaction.
3333
Does this sound too good to be true?
34-
Does the rational part of your brain see through this shallow pitch for yet another mediocre react library?
34+
Do you start to see through this shallow pitch for yet another react component library?
3535

36-
Reject those thoughts and allow me to demonstrate the overwhelming might of this library with a simple example below!
36+
Reject those thoughts and allow me to demonstrate the might of this library with a simple example below!
3737

3838
### Before
3939

4040
Here you see two common use cases where you have to show something when a condition is true and map content from an array of data.
4141
This is normally solved by inline arrow functions that are hard to read and easily becomes unmanageable in more complex components.
4242

4343
```jsx
44-
import React from 'react';
45-
4644
const Menu = ({ showMenuItems }) => (
4745
<nav>
4846
<a href="/">Home</a>
@@ -67,16 +65,15 @@ What they do are intuitively obvious due to careful naming and all the noise fro
6765
It's components all the way down.
6866

6967
```jsx
70-
import React from 'react';
71-
import { Map, Show } from 'react-semantics';
68+
import { Show, List } from 'react-semantics';
7269

7370
const Menu = ({ showMenuItems }) => (
7471
<nav>
7572
<a href="/">Home</a>
7673
<Show when={showMenuItems}>
7774
<ul>
78-
<Map
79-
array={['prices', 'contact', 'about']}
75+
<List
76+
items={['prices', 'contact', 'about']}
8077
render={m => (
8178
<li key={m}>
8279
<a href={`/${m}`}>{m}</a>
@@ -97,52 +94,18 @@ $ npm install react-semantics
9794

9895
## Example usage
9996

100-
### Show
101-
10297
```jsx
10398
import { Show } from 'react-semantics';
10499

105-
<Show when={5 > 4}>
100+
<Show when={true}>
106101
<div>Render me!</div>
107102
</Show>
108103
```
109104

110-
### Map
111-
112-
```jsx
113-
import { Map } from 'react-semantics';
114-
115-
<Map
116-
array={[1, 2, 3, 4, 5]}
117-
render={n => (
118-
<div key={n}>{`Render ${n}!`}</div>
119-
)}
120-
/>
121-
```
122-
123-
### Switch
124-
125-
```jsx
126-
import { Switch } from 'react-semantics';
127-
128-
<Switch value={3}>
129-
<Switch.Case value={1}>
130-
<div>Render me!</div>
131-
</Switch.Case>
132-
133-
<Switch.Case value={2}>
134-
<div>No, render me!</div>
135-
</Switch.Case>
136-
137-
<Switch.Default>
138-
<div>Nobody renders better than me!</div>
139-
</Switch.Default>
140-
</Switch>
141-
```
105+
## Documentation
142106

143-
## API
107+
https://csvenke.github.io/react-semantics/
144108

145-
Coming soon...
146109

147110
## Development setup
148111

‎docs/build/1.fe91bd6d.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/build/bundle.e7801c01.js‎

Lines changed: 55 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-semantics</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"></head><body><div id="rsg-root"></div><script src="build/bundle.e7801c01.js"></script></body></html>

0 commit comments

Comments
 (0)