Azachii-ui-react NPM

azachii-ui-react

Componentes de React diseñados por Azachii, agiliza el desarrollo de tu aplicación web usando nuestros componentes, personalizalos hasta convertirlos en tuyos.

Instalación

npm install --save azachii-ui-react

Uso

AzachiiProvider

Se recomienda envolver tu aplicación en un AzachiiProvider para obtener acceso a:

dark: Indica si el modo obscuro esta habilitado.
toggleDark: Cambia el modo claro <--> obscuro.

Y para configurar algunos aspectos de los componentes:

allowDark: Habiliita el cambio entre modo claro y modo obscuro.
linkComponent: El componente que se usará por defecto para nanegar entre páginas.
framework: A veces es necesario definir el framework con el que funcionara la librería.
- nextjs
theme: Configura los colores de los componentes
- accentColor: Fondo de acento en tema claro.
- accentColorText: Color de acento del texto en tema claro.
- accentDarkColor: Fondo de acento en tema obscuro.
- accentDarkColorText: Color de acento del texto en tema obscuro.

También es necesario que importes la hoja de estilos explicitamente.

import React from 'react'
import { AzachiiProvider } from 'azachii-ui-react'
import 'azachii-ui-react/dist/style.css'
import { Link } from 'gatsby'
import MainApp from './App'

const App = () => (
  <AzachiiProvider
    allowDark // Default: false
    theme={{
      accentColor: '#3a4da7', // Default: #ffffff
      accentColorText: '#fff', // Default: #181818
      accentDarkColor: '#b71c1c', // Default: #181818
      accentDarkColorText: '#fff' // Default: #fff
    }}
    linkComponent={Link} // Default <a>
    framework={undefined}
  >
    <MainApp />
  </AzachiiProvider>
)

ReactDOM.render(<App />, document.getElementById('root'))

AzachiiContext

Retorna los valores antes mencionados en el AzachiiProvider:

dark -> Default: false
toggleDark
theme -> Default: {}

import React, { useContext } from 'react'
import { AzachiiContext } from 'azachii-ui-react'

const HomePage = () => {
  const {
    toggleDark,
    dark,
    accentColor,
    accentColorText,
    accentDarkColor,
    accentDarkColorText
  } = useContext(AzachiiContext)

  return (
    <button
      type='button'
      onClick={toggleDark}
      style={{
        backgroundColor: dark ? accentDarkColor : accentDarkColorText,
        color: dark ? accentDarkColorText : accentColorText
      }}
    >
      {`${dark ? 'Desactivar' : 'Activar'} modo obscuro`}
    </button>
  )
}

Componentes

Footer

Un Footer minimalista, personalizalo agregando el nombre de tu sitio, sus multiples secciones y tus redes sociales.

Props:

withDivider -> Agrega una línea horizontal previa al contenido. Default: false
sections -> Un Arreglo de objetos con las siguientes claves:
- title: Nombre de la sección
- href: url
- items: Arreglo de objetos con las siguientes claves:
  - title: Nombre de la sección
  - href: url
brand -> Cadena de texto u objeto que contenga lo siguiente:
- name
- longName
social -> Un objeto que acepta las siguientes claves:
- facebook
- instagram
- twitter
- linkedin
- github

import React from 'react'
import { Footer } from 'azachii-ui-react'

const Layout = () => (
  <>
    <Footer
      withDivider // Default: false
      sections={[
        {
          title: 'Acerca de',
          href: '/'
        },
        {
          title: 'Servicios',
          href: '/servicios',
          items: [
            {
              title: 'Desarrollo',
              href: '/desarrollo'
            }
          ]
        }
      ]}
      brand={{ // O únicamente brand='Azachii'
        name: 'Azachii',
        longName: 'Azachii Develop'
      }}
      social={{
          facebook: 'https://www.facebook.com/az4chii-100360501432809/',
          instagram: 'https://www.instagram.com/az4chii/',
          twitter: 'https://twitter.com/Azachii1',
          linkedin: 'https://www.linkedin.com/company/38087888',
          github: 'https://github.com/Azachii'
        }}
    >
  </>
)

export default Layout

Header

Un Header minimalista, personalizalo agregando el nombre de tu sitio, sus multiples secciones. Incluye un Sidebar y un Switch para cambiar entre el modo obscuro y el modo claro (En el caso de que este activado el cambio). Tambíenn puedes usar tu Sidebar personalizado.

Props:

transparent -> Remueve el fondo del Header, en el caso de que la posición del header sea fija, el fondo reaparecera cuando hayas hecho scroll. Default: false
withElevation -> Agrega una sombra en la parte de abajo, en el caso de que la posiciín del header sea fija, aparecera automaticamente cuando hayas hecho scroll. Default: false
position -> La posición del header. Default: relative
title -> El nombre de tu sitio
items -> Las secciónes que apareceran en el header, acepta subitems para aparecer en un dropdown. Default: []
- label -> Nombre de la sección
- href -> Url de la sección
- items -> Subitems
  - label-> Nombre de la subsección
  - href -> Url de la subsección
sidebar: Un objecto con las configuraciónes del sidebar o un componente de React que será utiliizado como Sidebar.
- social -> Un objeto que acepta las siguientes claves:
  - facebook
  - instagram
  - twitter
  - linkedin
  - github
- extraItems: Por defecto, agrega las secciones del header al sidebar, si necesitas agregar algo más, aquí es donde debes colocarlo. Es un arreglo de objetos
  - label -> Nombre de la sección
  - href -> Url de la sección
  - items -> Subitems
    - label-> Nombre de la subsección
    - href -> Url de la subsección

import React from 'react'
import { Header } from 'azachii-ui-react'

const Layout = () => (
  <>
    <Header
      transparent // Default: false
      withElevation={false} // Default: false
      position='fixed' // Default: relative
      title='Azachii'
      items={[
          {
            title: 'Servicios',
            href: '/servicios',
          },
          {
            title: 'Equipo',
            href: '/equipo',
          },
          {
            title: 'Blog',
            href: '/blog',
          },
          {
            title: 'Términos y Condiciones',
            href: '/',
          },
        ]}
        sidebar={{ // O sidebar={({ isOpen, headerItems }) => <MySidebar open={isOpen} items={headerItems} />}
          social: {
            facebook: 'https://www.facebook.com/az4chii-100360501432809/',
            instagram: 'https://www.instagram.com/az4chii/',
            twitter: 'https://twitter.com/Azachii1',
            linkedin: 'https://www.linkedin.com/company/38087888',
            github: 'https://github.com/Azachii',
          },
          extraItems: [
            {
              label: 'Azachii',
              href: 'https://azachii.digital'
            }
          ]
        }}
    >
  </>
)