react-minolith

Overview

react-minolith is an open-source react wrapper for minolith.

⚠️Breaking Changes version 1.0

react-minolith now have @emotion/react as dependencies.

npm install @emotion/react

Installation

npm install react-minolith @emotion/react

Getting Started

After installation, you can import any react-minolith component and start playing around.

For example…

import {
  Button,
  ColorScheme,
  Container,
  Footer,
  Hamburger,
  Header,
  Heading,
  Main,
  MinolithStatic,
  Nav,
  NavAccordion,
  NavBrand,
  NavBrandCenter,
  NavBrandLeft,
  NavBrandRight,
  NavMenu,
  NavMenuItem,
  Section,
} from "react-minolith";
import { useState } from "react";

export default function HelloWorldPage() {
  const [colorScheme, setColorScheme] = useState<ColorScheme>("light");
  const [isActive, setIsActive] = useState<boolean>(false);
  return (
    <MinolithStatic colorScheme={colorScheme}>
      <Header>
        <Nav>
          <NavAccordion>
            <NavBrand>
              <NavBrandLeft>
                <Hamburger
                  isActive={isActive}
                  aria-label="menu"
                  aria-expanded="false"
                  data-target="navbar-menu"
                  onClick={() => {
                    setIsActive(!isActive);
                  }}
                />
              </NavBrandLeft>
              <NavBrandCenter>{"Hello world"}</NavBrandCenter>
              <NavBrandRight>
                <Button
                  spacing={{ margin: 1 }}
                  colorName={colorScheme === "light" ? "orange" : "blue"}
                  onClick={() =>
                    setColorScheme(colorScheme === "light" ? "dark" : "light")
                  }
                >
                  {colorScheme}
                </Button>
              </NavBrandRight>
            </NavBrand>
            <NavMenu isActive={isActive}>
              <NavMenuItem as="a" href="/about/">
                {"About"}
              </NavMenuItem>
              <NavMenuItem as="a" href="/products/">
                {"Products"}
              </NavMenuItem>
              <NavMenuItem as="a" href="/contact/">
                {"Contact"}
              </NavMenuItem>
            </NavMenu>
          </NavAccordion>
        </Nav>
      </Header>
      <Main>
        <Container>
          <Section spacing={{ padding: { y: 1 } }}>
            <Heading level={1}>{"Hello world"}</Heading>
          </Section>
        </Container>
      </Main>
      <Footer>
        <Container>{"©anonymous"}</Container>
      </Footer>
    </MinolithStatic>
  );
}

check out Storybook for more details.

License

This project is licensed under the terms of the MIT license.