Yapui NPM | npm.io

YAPUI

Yet Another Primitive UI.

Development Requirements

node
npm | yarn

See package.json for dependencies

Motivation

Can read the full reasoning in the blog post, however the main motivation are:

to learn,
control the API,
opinionated way of styling via objects
most important have set of UI components that I have full control over when building my side projects.

Installation

npm install yapui

Setup

Single page application (SPA)

This is how is used in a React SPA

// index.js
import React from 'react';
import { render } from 'react-dom';
import { UiProvider, createStylesRenderer } from 'yapui';
import { App } from './App';

const renderer = createStylesRenderer();
render(
  <UiProvider renderer={renderer}>
    <App />
  </UiProvider>,
  document.getElementById('app')
);

Next.js

Usage in next.js is based on this (now-example)https://github.com/zeit/next.js/tree/master/examples/with-fela

// pages/_document.js
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { createStylesRenderer, renderToNodeList } from 'yapui';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const renderer = createStylesRenderer();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => <App {...props} renderer={renderer} />,
      });

    const initialProps = await Document.getInitialProps(ctx);
    const styles = renderToNodeList(renderer);
    return {
      ...initialProps,
      // styles prop is then used in the render method automatically
      // by the custom document. No need to add it manually
      styles: [...initialProps.styles, ...styles],
    };
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// pages/_app.js

import React from 'react';
import { UiProvider } from 'yapui';
// before 2.6.1 you need a fallback renderer, now this is included in
// UiProvider
export default function MyApp({ Component, pageProps, renderer }) {
  return (
    <UiProvider renderer={renderer}>
      <Component {...pageProps} />
    </UiProvider>
  );
}