reactsize-jj v0.1.0

Reactsize

Este es un paquete de pruebas de despliegue en NPM

Jhoan Jimenez

yarn add reactsize-jj

Navbar Reactsize

import { ListNavbar, Navbar, LogoNavbar } from 'reactsize-jj';

export const rutas = [
    {
        route: '/inicio',
        name:  'Inicio'
    },
    {
        route: '/nosotros',
        name:  'Nosotros'
    },
    {
        route: '/servicios',
        name:  'Servicios'
    },
    {
        route: '/contacto',
        name:  'Contacto'
    },
]

<BrowserRouter>
    <Navbar>
        <LogoNavbar/>
        <ListNavbar rutas={rutas}/>
    </Navbar>
    <Routes>
        {
          rutas.map( (ruta: Rutas) => (
            <Route key={ruta.route} path={ruta.route} element={ <>{ruta.name}</> }/>
            ))
        }
        <Route path="/*" element={ <Navigate to={rutas[0].route} replace/> } />
    </Routes>
</BrowserRouter>

Container Reactsize

import { Container } from 'reactsize-jj';

<Container>
    <div>Hola Mundo</div>
</Container>

Container, Row, Col Reactsize

import { Container, Row, Col } from 'reactsize-jj';

<Container>
    <Row>
        <Col sizexs='12' sizesm='6' sizemd='4' sizelg='3'>
        </Col>
    </Row>
</Container>

SearchBar Reactsize

import { SearchBar } from 'reactsize-jj';

const [searchInput, setSearchInput] = useState<string>('');
const clear = () => setSearchInput('');
const handleChange = (e: any) => {
    e.preventDefault();
    setSearchInput(e.target.value);
};

<SearchBar
    clear={clear}
    searchInput={searchInput}
    handleChange={handleChange} 
    placeholder={'Buscar ciudad'}
/>

SearchBar Reactsize

import { CardSimple } from 'reactsize-jj';

<CardSimple 
    img={img}
    route="/inicio"
    title="Casa Finca"
    subtitle="Ciudad - País"
/>