You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jun 2, 2024. It is now read-only.
*__[List](https://csvenke.github.io/react-semantic-render/#/List)__: Renders content from an array of data.
44
+
*__[Show](https://csvenke.github.io/react-semantic-render/#/Show)__: Renders content when specified condition is true.
45
+
*__[ShowAsync](https://csvenke.github.io/react-semantic-render/#/ShowAsync)__: Renders content when specified promise is pending, resolved and rejected.
46
+
*__[Switch](https://csvenke.github.io/react-semantic-render/#/Switch)__: Renders content from first __[Switch.Case](https://csvenke.github.io/react-semantic-render/#/SwitchCase)__ that matches, else __[Switch.Default](https://csvenke.github.io/react-semantic-render/#/SwitchDefault)__ if it exists.
import { Show, List } from'react-semantic-render';
70
+
```
72
71
73
-
constMenu= ({ showMenuItems }) => (
74
-
<nav>
75
-
<a href="/">Home</a>
76
-
<Show when={showMenuItems}>
77
-
<ul>
78
-
<List
79
-
items={['prices', 'contact', 'about']}
80
-
render={m=> (
81
-
<li key={m}>
82
-
<a href={`/${m}`}>{m}</a>
83
-
</li>
84
-
)}
85
-
/>
86
-
</ul>
87
-
</Show>
88
-
</nav>
89
-
);
72
+
```jsx
73
+
<div>
74
+
<Show when={true}>
75
+
<List
76
+
items={[1, 2, 3, 4, 5]}
77
+
render={data=><div>{data}</div>}
78
+
/>
79
+
</Show>
80
+
</div>
90
81
```
91
82
92
83
## Why
93
84
94
85
In the example above you see two very common use cases where you have to render something when a condition is true and render content from an array of data.
95
86
This is usually solved with inline arrow functions that are hard to read and easily becomes unmanageable in more complex components.
96
87
97
-
Below you can see how it would look like with inline arrow functions.
88
+
Below you can see how it would look with inline arrow functions.
98
89
99
90
```jsx
100
-
constMenu= ({ showMenuItems }) => (
101
-
<nav>
102
-
<a href="/">Home</a>
103
-
{showMenuItems ? (
104
-
<ul>
105
-
{['prices', 'contact', 'about'].map(m=> (
106
-
<li key={m}>
107
-
<a href={`/${m}`}>{m}</a>
108
-
</li>
109
-
))}
110
-
</ul>
111
-
) :null}
112
-
</nav>
113
-
)
91
+
<div>
92
+
{true? (
93
+
{[1, 2, 3, 4, 5].map(data=><div>{data}</div>)}
94
+
) :null}
95
+
</div>
114
96
```
115
97
116
-
117
-
The purpose of this library is to develop and maintain semantic helper components that removes the need for inline arrow functions in react components.
98
+
The purpose of this library is to provide helpful semantic render components that makes the `React.Component` render method easier to read and follow.
118
99
119
100
Do you have an idea about a component you think belong here? [Tell us here!](https://github.com/csvenke/react-semantic-render/issues/new)
120
101
@@ -124,17 +105,31 @@ For full list of components and how they are used, go to our [documentation](htt
124
105
125
106
## Development
126
107
127
-
```bash
128
-
# Install dependencies
108
+
##### Install dependencies
109
+
```
129
110
$ npm install
111
+
```
130
112
131
-
# Run linters
113
+
##### Run linters
114
+
```
132
115
$ npm run lint
116
+
$ npm run lint:fix
117
+
```
133
118
134
-
# Run tests
119
+
##### Run tests
120
+
```
135
121
$ npm run test
122
+
$ npm run test:watch
123
+
```
136
124
137
-
# Build project
125
+
##### Build docs
126
+
```
127
+
$ npm run docs
128
+
$ npm run docs:server
129
+
```
130
+
131
+
##### Build project
132
+
```
138
133
$ npm run build
139
134
```
140
135
@@ -143,7 +138,7 @@ $ npm run build
143
138
In lieu of a formal styleguide, take care to maintain the existing coding style.
144
139
145
140
* Add unit tests for any new or changed functionality.
146
-
* All library component props must be documented with jsdoc `/** */`, so that typescript definition files can be generated.
141
+
* All library components exposed to the user must be documented with jsdoc `/** */`.
147
142
* All library components must have `prop-types` that matches the component props interface.
148
143
149
144
#### Commit style guide
@@ -161,4 +156,4 @@ Don't worry about making a mistake, `commitlint` will stop you if you do, and yo
161
156
162
157
## License
163
158
164
-
This project is licensed under the MIT License - see [LICENSE](https://github.com/csvenke/react-semantic-render/blob/master/LICENSE) file for details.
0 commit comments