https://github.com/jgabrielleal/jsx-simplify

Biblioteca leve para simplificar a lógica dentro do JSX, tornando o código mais limpo.
https://github.com/jgabrielleal/jsx-simplify

biblioteca frontend javascript jsx react

Last synced: 3 months ago
JSON representation

Biblioteca leve para simplificar a lógica dentro do JSX, tornando o código mais limpo.

• Host: GitHub
• URL: https://github.com/jgabrielleal/jsx-simplify
• Owner: jgabrielleal
• Created: 2024-10-19T23:16:45.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-21T00:49:11.000Z (3 months ago)
• Last Synced: 2024-10-21T09:11:48.107Z (3 months ago)
• Topics: biblioteca, frontend, javascript, jsx, react
• Language: TypeScript
• Homepage:
• Size: 9.77 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# JSX Simplify

JSX Simplify é uma biblioteca JavaScript que facilita a criação de componentes JSX com uma sintaxe mais simples e intuitiva.

A ideia geral da biblioteca é tornar o JSX mais apresentável e menos poluído em comparação com a forma padrão do React de inserir lógica dentro do JSX usando `{}`. Com o JSX Simplify, você pode escrever componentes de maneira mais limpa e intuitiva, facilitando a manutenção e leitura dos componentes.

## Instalação

Você pode instalar a biblioteca via npm ou yarn:

```bash

npm install jsx-simplify

yarn add jsx-simplify

```

## Uso

Aqui está um exemplo básico de como usar o JSX Simplify em componentes React:

```javascript

import { Condition } from 'jsx-simplify';

const isLoggedIn = true;

return (

    

        
Bem-vindo, usuário!

    

);

```


## Componentes

Condition e ConditionError

###

`Componente Condition` é utilizado para renderizar elementos JSX com base em uma expressão. Ele aceita a seguinte propriedade:

- `condition` (obrigatório): Valor ou expressão a ser testada em uma condicional 

`Componente ConditionError` é utilizado para renderizar elementos JSX quando a expressão booleana do componente `Condition` falha. Ele é usado em conjunto com o `Condition` para fornecer uma alternativa de renderização.

#### Exemplo de uso:

```javascript

import { Condition, ConditionError } from 'jsx-simplify';

const isLoggedIn = false;

return (

    <>

        

            
Bem-vindo, usuário!

        

        

            
Por favor, faça login para continuar.

        

    >

);

```


No exemplo acima, o parágrafo "Por favor, faça login para continuar." será renderizado apenas se a variável `isLoggedIn` for `false`.

###

###

Loop

###

`Componente Loop` é utilizado para renderizar uma lista de elementos JSX com base em um array. Ele aceita as seguintes propriedades:

- `items` (obrigatório): Um array onde os items serão iterados e renderizados.

#### Exemplo de uso:

```javascript

import { Loop } from 'jsx-simplify';

const users = [

    { id: 1, name: 'Alice' },

    { id: 2, name: 'Bob' },

    { id: 3, name: 'Charlie' }

];

return (

    

        {(item, index)=>(

            
{item.name}

        )}

    

);

```


No exemplo acima, um parágrafo será renderizado para cada usuário na coleção `users`, exibindo o nome de cada um.

###

Filter

### 

`Componente Filter` é utilizado para renderizar uma lista de elementos JSX com base em um array filtrado. Ele aceita as seguintes propriedades:

- `items` (obrigatório): Um array onde os itens serão filtrados e renderizados.

`condition` (obrigatório): Condição que cada item deve atender para ser incluído na renderização final.

#### Exemplo de uso:

```javascript

import { Filter } from 'jsx-simplify';

const users = [

    { id: 1, name: 'Alice', active: true },

    { id: 2, name: 'Bob', active: false },

    { id: 3, name: 'Charlie', active: true }

];

return (

    

        {(item, index) => (

            
{item.name}

        )}

    

);

```


No exemplo acima, apenas os usuários ativos (onde `active` é `true`) serão renderizados na lista.

###