@timechimp/tacugama NPM

Tacugama

React components for a seamless integration with the TimeChimp UI

1. Installation

$ npm install @timechimp/tacugama

2. Getting started

Wrap your app with the Tacugama ThemeProvider

import { App } from './App';
import { ThemeProvider } from '@timechimp/tacugama';

ReactDOM.render(
      <ThemeProvider>
        <App />
      </ThemeProvider>,
    document.getElementById('root'),
  );

Use Tacugama components in your app

import { Avatar } from '@timechimp/tacugama';

export const App = () => (
    <>
        <Avatar name="John Doe" />
    </>
);

Create a custom _app.jsx and wrap the Component with the Tacugama ThemeProvider

import { ThemeProvider } from '@timechimp/tacugama';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <ThemeProvider>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  )
}

export default MyApp

Create a custom _document.jsx and set it up as follows:

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { StyletronProvider, styletron } from '@timechimp/tacugama';


class MyDocument extends Document {
  static getInitialProps(props) {
    const page = props.renderPage((App) => (props) => (
      <StyletronProvider value={styletron}>
        <App {...props} />
      </StyletronProvider>
    ))
    const stylesheets = styletron.getStylesheets() || []
    return { ...page, stylesheets }
  }

  render() {
    return (
      <Html>
        <Head>
          {this.props.stylesheets.map((sheet, i) => (
            <style
              className="_styletron_hydrate_"
              dangerouslySetInnerHTML={{ __html: sheet.css }}
              media={sheet.attrs.media}
              data-hydrate={sheet.attrs['data-hydrate']}
              key={i}
            />
          ))}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument;

For all available components check out the Tacugama Storybook

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

8 months ago

8 months ago

7 months ago

8 months ago

7 months ago

8 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

9 months ago

10 months ago

10 months ago

6 months ago

10 months ago

10 months ago

10 months ago

6 months ago

6 months ago

6 months ago

6 months ago

9 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

9 months ago

9 months ago

9 months ago

6 months ago

6 months ago

8 months ago

8 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

10 months ago

5 months ago

10 months ago

5 months ago

9 months ago

9 months ago

5 months ago

10 months ago

10 months ago

8 months ago

10 months ago

8 months ago

8 months ago

10 months ago

8 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

Tacugama

1. Installation

2. Getting started

CSR (Client-side Rendering)

SSR (Server-side Rendering) with Next.js

Step 1

Step 2