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

Commit 28ace08

Browse files
csvenkecsvenke
committed
feat: add hideable hoc and showifelse component
Add Hideable hoc and ShowIfElse component. Improve main README and styleguidist documentation. Add size-snapshot.json. Optimize rollup config.
1 parent 0831c7c commit 28ace08

33 files changed

+578
-730
lines changed

‎.size-snapshot.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"lib/index.cjs.js": {
3+
"bundled": 5651,
4+
"minified": 3085,
5+
"gzipped": 1047
6+
},
7+
"lib/index.esm.js": {
8+
"bundled": 5360,
9+
"minified": 2805,
10+
"gzipped": 1001,
11+
"treeshaked": {
12+
"rollup": {
13+
"code": 1302,
14+
"import_statements": 195
15+
},
16+
"webpack": {
17+
"code": 3192
18+
}
19+
}
20+
}
21+
}

‎README.md

Lines changed: 115 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,17 @@
3939

4040
## Key features
4141

42-
* __Growing list of semantic helper components__
43-
* __[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-
* __[Switch](https://csvenke.github.io/react-semantic-render/#/Switch)__: Renders content from first case that matches, else default if it exists.
46-
* __Tiny bundle size__
47-
* __100% test coverage__
48-
* __Production ready__
49-
* __Blazing fast__
50-
* __TypeScript type definitions__
42+
- **Growing list of semantic helper components and hocs**
43+
- **[List](https://csvenke.github.io/react-semantic-render/#!/List)**: Renders content from an array of data.
44+
- **[Switch](https://csvenke.github.io/react-semantic-render/#!/Switch)**: Renders content from first case that matches, else default if it exists.
45+
- **[Show](https://csvenke.github.io/react-semantic-render/#!/Show)**: Renders content when specified condition is true.
46+
- **[ShowIfElse](https://csvenke.github.io/react-semantic-render/#!/ShowIfElse)**: Renders content when condition is true, else renders something else.
47+
- **[Hideable](https://csvenke.github.io/react-semantic-render/#!/Hideable)**: Higher order component that injects 'hideComponent' prop into specified component.
48+
- **Tiny bundle size** 😃
49+
- **Supports treeshaking** 🔥
50+
- **100% test coverage** 😀
51+
- **TypeScript type definitions** 😏
52+
- **Blazing fast** 😎
5153

5254
## Install
5355

@@ -65,34 +67,110 @@ $ yarn add react-semantic-render
6567

6668
### Example usage
6769

70+
Render button when condition is true
71+
6872
```jsx
69-
import { Show, List } from 'react-semantic-render';
73+
import React from 'react';
74+
import Show from 'react-semantic-render/Show';
75+
76+
const App = ({ showButton }) => (
77+
<Show when={showButton}>
78+
<button>Click me!</button>
79+
</Show>
80+
);
7081
```
7182

83+
Render list of names
84+
7285
```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>
86+
import React from 'react';
87+
import List from 'react-semantic-render/List';
88+
89+
const App = () => (
90+
<ul>
91+
<List items={['John', 'Jane', 'Bill', 'Pete']}>
92+
{name => (
93+
<li key={name}>
94+
<span>{name}</span>
95+
</li>
96+
)}
97+
</List>
98+
</ul>
99+
);
100+
```
101+
102+
Render message when condition is true, else render something else
103+
104+
```jsx
105+
import React from 'react';
106+
import Switch from 'react-semantic-render/Switch';
107+
108+
const App = ({ showMessage }) => (
109+
<Switch value>
110+
<Switch.Case value={showMessage}>
111+
<span>Render me!</span>
112+
</Switch.Case>
113+
<Switch.Default>
114+
<span>Nobody renders better than me!</span>
115+
</Switch.Default>
116+
</Switch>
117+
);
81118
```
82119

83120
## Why
84121

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.
122+
In the example below you see a component named `UserList` that contains two very common use cases where you have to render something when a condition is true and render content from an array of data.
86123
This is usually solved with inline arrow functions that are hard to read and easily becomes unmanageable in more complex components.
87124

88-
Below you can see how it would look with inline arrow functions.
125+
```jsx
126+
const UserList = ({ isLoading, results }) => (
127+
<div>
128+
{isLoading && <span>Loading...</span>}
129+
{!isLoading && !results.length && <span>No results found</span>}
130+
{!isLoading &&
131+
results.length > 0 && (
132+
<ul>
133+
{result.map(user => (
134+
<li key={user.id}>
135+
<span>{user.name}</span>
136+
</li>
137+
))}
138+
</ul>
139+
)}
140+
</div>
141+
);
142+
```
143+
144+
Here you see how the component above could be rewritten with components from `react-semantic-render`.
145+
While it might be abit more verbose, the readability is greatly increased and you immeadiatly see whats going on.
89146

90147
```jsx
91-
<div>
92-
{true ? (
93-
{[1, 2, 3, 4, 5].map(data => <div>{data}</div>)}
94-
) : null}
95-
</div>
148+
import { List, Switch } from 'react-semantic-render';
149+
150+
const UserList = ({ isLoading, results }) => (
151+
<div>
152+
<Switch value>
153+
<Switch.Case value={isLoading}>
154+
<span>Loading...</span>
155+
</Switch.Case>
156+
<Switch.Case value={!isLoading && !result.length}>
157+
<span>No results found</span>
158+
</Switch.Case>
159+
<Switch.Case value={!isLoading && results.length > 0}>
160+
<ul>
161+
<List
162+
items={results}
163+
render={user => (
164+
<li key={user.id}>
165+
<span>{user.name}</span>
166+
</li>
167+
)}
168+
/>
169+
</ul>
170+
</Switch.Case>
171+
</Switch>
172+
</div>
173+
);
96174
```
97175

98176
The purpose of this library is to provide helpful semantic render components that makes the `React.Component` render method easier to read and follow.
@@ -106,52 +184,58 @@ For full list of components and how they are used, go to our [documentation](htt
106184
## Development
107185

108186
##### Install dependencies
187+
109188
```
110189
$ npm install
111190
```
112191

113192
##### Run linters
193+
114194
```
115195
$ npm run lint
116-
$ npm run lint:fix
117196
```
118197

119198
##### Run tests
199+
120200
```
121201
$ npm run test
122202
$ npm run test:watch
123203
```
124204

125205
##### Build docs
206+
126207
```
127208
$ npm run docs
128209
$ npm run docs:server
129210
```
130211

131212
##### Build project
213+
132214
```
133215
$ npm run build
134216
```
135217

136218
## Contributing
137219

138-
In lieu of a formal styleguide, take care to maintain the existing coding style.
220+
In lieu of a formal styleguide, take care to maintain the existing coding style.
139221

140-
* Add unit tests for any new or changed functionality.
141-
* All library components exposed to the user must be documented with jsdoc `/** */`.
142-
* All library components must have `prop-types` that matches the component props interface.
222+
- Add unit tests for any new or changed functionality.
223+
- All library components exposed to the user must be documented with jsdoc `/** */`.
224+
- All library components must have `prop-types` that matches the component props interface.
143225

144226
#### Commit style guide
227+
145228
We use [conventional commits style](https://conventionalcommits.org/).
146229
Read up on it before doing your first commit.
147-
Don't worry about making a mistake, `commitlint` will stop you if you do, and you can try again.
230+
Don't worry about making mistakes, `commitlint` will stop you and you can try again.
148231

149232
## Contributors
150233

151234
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
152235
<!-- prettier-ignore -->
153236
| [<img src="https://avatars3.githubusercontent.com/u/9643219?v=4" width="100px;"/><br /><sub><b>Christian Svenkerud</b></sub>](https://github.com/csvenke)<br />[💻](https://github.com/csvenke/react-semantic-render/commits?author=csvenke "Code") [📖](https://github.com/csvenke/react-semantic-render/commits?author=csvenke "Documentation") [🤔](#ideas-csvenke "Ideas, Planning, & Feedback") [⚠️](https://github.com/csvenke/react-semantic-render/commits?author=csvenke "Tests") | [<img src="https://avatars2.githubusercontent.com/u/41568251?v=4" width="100px;"/><br /><sub><b>Leiv Fredrik Berge</b></sub>](https://github.com/bergelf)<br />[💻](https://github.com/csvenke/react-semantic-render/commits?author=bergelf "Code") [📖](https://github.com/csvenke/react-semantic-render/commits?author=bergelf "Documentation") [🤔](#ideas-bergelf "Ideas, Planning, & Feedback") [⚠️](https://github.com/csvenke/react-semantic-render/commits?author=bergelf "Tests") |
154237
| :---: | :---: |
238+
155239
<!-- ALL-CONTRIBUTORS-LIST:END -->
156240

157241
## License

‎jest.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ module.exports = {
1414
statements: 90,
1515
},
1616
},
17-
collectCoverageFrom: ['src/@(components|utils)/**/*.@(ts|tsx)'],
17+
collectCoverageFrom: ['src/@(components|hocs|utils)/**/*.@(ts|tsx)'],
1818
globals: {
1919
'ts-jest': {
2020
tsConfig: './tsconfig.jest.json',

0 commit comments

Comments
 (0)