0.0.17 • Published 2 years ago

evristica-ui v0.0.17

Weekly downloads
-
License
MIT
Repository
gitlab
Last release
2 years ago

npm

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

yarn

yarn add @emotion/styled @emotion/react @euristica/ui

Demo

guide basics

  • the guide is made using @emotion and typescript

usage

themes

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

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

    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

0.0.17

2 years ago

0.0.12

2 years ago

0.0.13

2 years ago

0.0.14

2 years ago

0.0.15

2 years ago

0.0.16

2 years ago

0.0.11

2 years ago

0.0.10

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.5

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.1

3 years ago