@thesaurus/components v0.1.40
@thesaurus/components
Biblioteca de componentes de React para Thesaurus.
Instalación
Necesitas instalar la biblioteca con algunas dependencias: Magma y Styled components
yarn
yarn add @thesaurus/components styled-components @sqymagma/{elements,theme}
npm
npm install --save @thesaurus/components styled-components @sqymagma/{elements,theme}
Setup
Para utilizar @thesaurus/components
es necesario añadir un contexto a toda la app mediante <SiteProvider>
asignándole el id del site.
Este id lo usa @thesaurus/components
internamente para asignar themes y subthemes entre otras cosas como CSS globales y elementos de i18n.
import { SiteProvider } from "@thesaurus/components"
const App = () => {
return (
<SiteProvider id="university"}>
<Main />
</SiteProvider>
)
}
## Components
Con el provider establecido podemos usar los componentes directamente en nuestra aplicación de forma explícita utilizando los componentes directamente.
import { BasicContent } from "@thesaurus/components"
const Page = () => (
<BasicContent
title={{ content: "Title", tag: "h2" }}
description="Lorem ipsum"
visualContent={{ image: { url: "//lorem.jpg", alt: "alt text" } }}
/>
)
Otra forma más programática para usar los componentes se basa en utilizar las funciones de render que provee @thesaurus/components
import { renderModule } from "@thesaurus/components"
const Page = () =>
renderModule({
module: "BasicContent",
title: {
content: "Title",
tag: "h2"
},
description: "Lorem ipsum"
visualContent: {
image: {
url: "//lorem.jpg", alt: "alt text"
}
}
})
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago