amelia-ux

Instalación amelia-ux

Para realizar la instalación de la librería amelia-ux puedes utilizar npm. Abre tu terminal y ejecuta el siguiente comando:

npm install amelia-ux

Componentes

Theme

El componente Theme ofrece la posiblidad de darle un tema a la interfaz. En este caso puede ser 'dark' o 'light'.

Por un lado, tenemos el proveedor que recibe las siguientes props:

• children: Elemenos de React que consumen el contexto.
• theme: Este es opcional, en caso de no recibir ninguno, el tema por defecto sera el del sistema.

Ejemplo de uso

import { ThemeProvider } from 'amelia-ux'

<ThemeProvider theme="dark">
    <App />
</ThemeProvider>

Para interactuar con el contexto dentro de nuestra aplicacion, podemos hacer uso del siguiente custom hook:

• useTheme(): Este hook nos proporciona dos datos:
  • theme: El tema actual.
  • toggleTheme(): Una función que nos permite alternar el tema.

Ejemplo de uso

import { useTheme, Button } from 'amelia-ux'

export default App = () => {
    const {theme, toggleTheme} = useTheme()
    
    return <div style={{backgroundColor: `${theme} === "dark ? #000 : #fff`}}>
        <Button 
            type="accent" 
            width="large" 
            onClick={toggleTheme}> 
            Toggle theme 
        </Button>    
    </div>
}

Toast

El componente Toast ofrece la posiblidad de añadir alertas a nuestra interfaz.

Por un lado tenemos el proveedor que recibe las siguintes props:

• children: Elementos que consumen el contexto.
• position: Este es opcional, en caso de no recibir ninguno, la posición por defecto sera 'top-right'. Puede ser:
  • top-right
  • top-left
  • bottom-right
  • bottom-left

Ejemplo de uso

import { Toast } from 'amelia-ux'

<Toast position="top-right">
    <App />
</Toast>

Para interactuar con el contexto dentro de nuestra aplicacion, podemos hacer uso del siguiente custom hook:

• useToast(): Este hook nos proporciona dos datos:
  • toast(): Una función que nos permite crear una alerta. Recibe el siguiente objeto:
    • type: Puede ser:
      • success
      • info
      • warning
      • error
    • message: Mensaje a mostrar.

Ejemplo de uso

import { useToast, Button, useTheme } from 'amelia-ux'

export default App = () => {
    const { theme } = useTheme()
    const { toast } = useToast()
    
    return <div style={{ backgroundColor:`${theme === "dark" ? '#000' : '#fff'}`}}>
        <Button 
            type="accent" 
            width="large" 
            onClick={() => 
            toast(
                {
                    type: "info", 
                    message: "My first toast with amelia-ux"
                })
            }> 
            Toggle theme 
        </Button>    
    </div>
}