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'
            }
          ]
        }}
    >
  </>
)

Otros Componentes

• Banner
• Button
• DarkToggle
• SocialIcons
• Sidebar
• Project
• Card
• Field
• Button
• Section

Licencia

MIT © Azachii