@alanngo/custom-components v1.2.0

Custom Components

🚀 Install

npm i @alanngo/custom-components

or

yarn add @alanngo/custom-components

🚀 Import Components

import {RenderIf} from "@alanngo/custom-components/dist"

🚀 Components

AwesomeText

An easy text component to create individual styled text and apply custom fonts without affecting other elements

Avoid

<h1 style= {{color: "red"}}> red h1 </h1>
<i><p>blue italic paragraph</p></i>

Prefered

<AwesomeText as="h1" color="red">red h1</AwesomeText>

<AwesomeText as="p" color="blue" italic>blue italic paragraph</AwesomeText>

Break

Need multiple line breaks without rewriting <br/> tag? Use this component to help you in just 1 line

Avoid

<br/>
<br/>
<br/>
...

Prefered

<Break number={3}/> 

RenderIf

Eliminates the need of ternary operator for conditional rendering

Avoid

const arr = [1, 2, 3]

{(arr.length>0?
<h1> everything nested will render if arr length is greater than 0 </h1>:
<></>)}

Prefered

const arr = [1, 2, 3]

<RenderIf condition = {arr.length > 0}>
<h1> everything nested will render if arr length is greater than 0 </h1>
</RenderIf>

🚀 Hooks

coming soon