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.
Are you tired of your react components looking like an unreadable mess?
40
-
Have you often asked yourself: "there must be a better way!"?
41
-
Then look no further, because this library is just what you need!
42
-
43
-
Multiple studies from reputable anonymous sources have shown that projects using this library have 24% higher productivity and increased life satisfaction.
44
-
Does this sound too good to be true?
45
-
Do you start to see through this shallow pitch for yet another react component library?
46
-
47
-
Reject those thoughts and allow me to demonstrate the might of this library with a simple example below!
48
-
49
-
### Before
42
+
## Install
50
43
51
-
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.
52
-
This is normally solved by inline arrow functions that are hard to read and easily becomes unmanageable in more complex components.
53
-
54
-
```jsx
55
-
constMenu= ({ showMenuItems }) => (
56
-
<nav>
57
-
<a href="/">Home</a>
58
-
{showMenuItems ? (
59
-
<ul>
60
-
{['prices', 'contact', 'about'].map(m=> (
61
-
<li key={m}>
62
-
<a href={`/${m}`}>{m}</a>
63
-
</li>
64
-
))}
65
-
</ul>
66
-
) :null}
67
-
</nav>
68
-
);
44
+
```bash
45
+
$ npm install react-semantics
69
46
```
70
47
71
-
### After
72
-
73
-
Here you see all inline arrow functions replaced by semantic components that are easy to read and understand.
74
-
What they do are intuitively obvious due to careful naming and all the noise from inline arrow functions are removed.
In the example above you see two very common use cases where you have to show something when a condition is true and map content from an array of data.
75
+
This is normally solved with inline arrow functions that are hard to read and easily becomes unmanageable in more complex components.
105
76
106
-
## Example usage
77
+
Below you can see how it would look like with inline arrow functions.
107
78
108
79
```jsx
109
-
import { Show } from'react-semantics';
110
-
111
-
<Show when={true}>
112
-
<div>Render me!</div>
113
-
</Show>
80
+
constMenu= ({ showMenuItems }) => (
81
+
<nav>
82
+
<a href="/">Home</a>
83
+
{showMenuItems ? (
84
+
<ul>
85
+
{['prices', 'contact', 'about'].map(m=> (
86
+
<li key={m}>
87
+
<a href={`/${m}`}>{m}</a>
88
+
</li>
89
+
))}
90
+
</ul>
91
+
) :null}
92
+
</nav>
93
+
)
114
94
```
115
95
116
-
## Documentation
117
96
118
-
https://csvenke.github.io/react-semantics/
97
+
The purpose of this library is to develop and maintain semantic helper components that removes the need for inline arrow functions in react components.
119
98
99
+
Do you have an idea about a component you think belong here? [Tell us here!](https://github.com/csvenke/react-semantics/issues/new)
100
+
101
+
## Documentation
102
+
103
+
For full list of components and how they are used, go to our [documentation](https://csvenke.github.io/react-semantics/).
120
104
121
105
## Development setup
122
106
@@ -136,11 +120,23 @@ $ npm run build
136
120
137
121
## Contributing
138
122
139
-
1. Fork repository
140
-
1. Create feature branch
141
-
1. Commit changes
142
-
1. Push to branch
143
-
1. Create new pull request
123
+
In lieu of a formal styleguide, take care to maintain the existing coding style.
124
+
* Add unit tests for any new or changed functionality.
125
+
* All library component props must be documented with jsdoc `/** */`, so that typescript definition files can be generated.
126
+
* All library components must have `prop-types` that matches the component props interface.
127
+
128
+
### Commit style guide
129
+
We use [conventional commits style](https://conventionalcommits.org/).
130
+
Read up on it before doing your first commit.
131
+
Don't worry about making a mistake, `commitlint` will stop you if you do, and you can try again.
132
+
133
+
## Contributors
134
+
135
+
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
136
+
<!-- prettier-ignore -->
137
+
|[<imgsrc="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-semantics/commits?author=bergelf"Code")[⚠️](https://github.com/csvenke/react-semantics/commits?author=bergelf"Tests")[📖](https://github.com/csvenke/react-semantics/commits?author=bergelf"Documentation")[🤔](#ideas-bergelf"Ideas, Planning, & Feedback")|
0 commit comments