relocale-ui

npm

npm i @emotion/styled @emotion/react relocale-ui --save

yarn

yarn add @emotion/styled @emotion/react relocale-ui

guide basics

• the guide is made using @emotion and typescript

usage

themes

import React, { useState } from "react";
import { ThemeProvider } from "@emotion/react";
import { themes } from "relocale-ui";

const Layout = () => {
    const [theme, setTheme] = useState("default");

    return (
        <ThemeProvider theme={themes[theme]}>
            <App />
        </ThemeProvider>
    )
};

two themes are now available (default and dark), but you can create your own

components

    import { Container, Label, Input, Datepicker //and more } from "@evristica/ui";
    
    const MyComponent = () => {
        return (
            <Input
                label="Some input"
                value={someValue}
                onChange={e => handler(e.target.value)}
            />
        )
    }
}

ssr

    import { ServerStyleSheet, StyleSheetManager } from "styled-components";
    const sheet = new ServerStyleSheet();
    
    // tags need to be added to html markup
    const styleTags = sheet.getStyleElement();
    
    const HtmlContent = <StyleSheetManager sheet={sheet.instance}>
        <App />
    </StyleSheetManager>

documentation

more complete documentation will come later