22
33 <img src =' ./media/logo.png ' width =" 20% " alt =' logo ' />
44
5- <h1 >react-semantics </h1 >
5+ <h1 >react-semantic-render </h1 >
66
7- <h4 >Blazing fast semantic helper components for working with <a href =" https://reactjs.org/ " target =" _blank " >React</a >.</h4 >
7+ <h4 >Blazing fast semantic helper components for rendering content with <a href =" https://reactjs.org/ " target =" _blank " >React</a >.</h4 >
88
99 <p >
10- <a href="https://www.npmjs.com/package/react-semantics ">
11- <img src="https://img.shields.io/npm/v/react-semantics .svg" alt="npm package" />
10+ <a href="https://www.npmjs.com/package/react-semantic-render ">
11+ <img src="https://img.shields.io/npm/v/react-semantic-render .svg" alt="npm package" />
1212 </a>
13- <a href="https://bundlephobia.com/result?p=react-semantics ">
14- <img src="https://img.shields.io/bundlephobia/min/react-semantics .svg" alt="bundle size" />
13+ <a href="https://bundlephobia.com/result?p=react-semantic-render ">
14+ <img src="https://img.shields.io/bundlephobia/min/react-semantic-render .svg" alt="bundle size" />
1515 </a>
16- <a href="https://travis-ci.com/csvenke/react-semantics ">
17- <img src="https://travis-ci.com/csvenke/react-semantics .svg?branch=master" alt="build status" />
16+ <a href="https://travis-ci.com/csvenke/react-semantic-render ">
17+ <img src="https://travis-ci.com/csvenke/react-semantic-render .svg?branch=master" alt="build status" />
1818 </a>
19- <a href='https://coveralls.io/github/csvenke/react-semantics ?branch=master'>
20- <img src='https://coveralls.io/repos/github/csvenke/react-semantics /badge.svg?branch=master' alt='Coverage Status ' />
19+ <a href='https://coveralls.io/github/csvenke/react-semantic-render ?branch=master'>
20+ <img src='https://coveralls.io/repos/github/csvenke/react-semantic-render /badge.svg?branch=master' alt='coverage status ' />
2121 </a>
22- <a href="https://david-dm.org/csvenke/react-semantics ">
23- <img src="https://david-dm.org/csvenke/react-semantics .svg" alt="dependencies status" />
22+ <a href="https://david-dm.org/csvenke/react-semantic-render ">
23+ <img src="https://david-dm.org/csvenke/react-semantic-render .svg" alt="dependencies status" />
2424 </a>
2525 </p >
2626
2727 <p >
28+ <a href="#key-features">Key features</a> •
2829 <a href="#install">Install</a> •
29- <a href="#example-usage">Example usage</a> •
30- <a href="#why">Why?</a> •
30+ <a href="#why">Why</a> •
3131 <a href="#documentation">Documentation</a> •
3232 <a href="#development">Development</a> •
3333 <a href="#contributing">Contributing</a> •
3737
3838</div >
3939
40+ ## Key features
41+ * __ Growing list of semantic helper components__
42+ * __ [ List] ( https://csvenke.github.io/react-semantics/#/List ) __ - Render content from an array of data.
43+ * __ [ Resolve] ( https://csvenke.github.io/react-semantics/#/Resolve ) __ - Render content asynchronously.
44+ * __ [ Show] ( https://csvenke.github.io/react-semantics/#/Show ) __ - Render content when a condition is true.
45+ * __ [ Switch] ( https://csvenke.github.io/react-semantics/#/Switch ) __ - Render content from case that matches specified expression.
46+ * __ [ Switch.Case] ( https://csvenke.github.io/react-semantics/#/SwitchCase ) __
47+ * __ [ Switch.Default] ( https://csvenke.github.io/react-semantics/#/SwitchDefault ) __
48+ * __ Small bundle size__
49+ * __ Blazing fast__
50+ * __ TypeScript type definitions__
51+ * __ Above 90% test coverage__
52+
4053## Install
4154
55+ Using npm:
56+
57+ ``` bash
58+ $ npm install --save react-semantic-render
59+ ```
60+
61+ Using yarn:
62+
4263``` bash
43- $ npm install react-semantics
64+ $ yarn add react-semantic-render
4465```
4566
46- ## Example usage
67+ ### Example usage
4768
4869``` jsx
49- import { Show , List } from ' react-semantics ' ;
70+ import { Show , List } from ' react-semantic-render ' ;
5071
5172const Menu = ({ showMenuItems }) => (
5273 < nav>
@@ -67,10 +88,10 @@ const Menu = ({ showMenuItems }) => (
6788);
6889```
6990
70- ## Why?
91+ ## Why
7192
72- 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.
73- This is normally solved with inline arrow functions that are hard to read and easily becomes unmanageable in more complex components.
93+ 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.
94+ This is usually solved with inline arrow functions that are hard to read and easily becomes unmanageable in more complex components.
7495
7596Below you can see how it would look like with inline arrow functions.
7697
0 commit comments