New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket

@timechimp/tacugama

Package Overview
Dependencies
Maintainers
6
Versions
736
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@timechimp/tacugama

https://github.com/TimeChimp/tacugama#readme

latest
Source
npmnpm
Version
19.0.1
Version published
Weekly downloads
853
635.34%
Maintainers
6
Weekly downloads
 
Created
Source

Tacugama

React components for a seamless integration with the TimeChimp UI

npm version CI

1. Installation

$ npm install @timechimp/tacugama

2. Getting started

CSR (Client-side Rendering)

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" />
  </>
);

SSR (Server-side Rendering) with Next.js

Step 1

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;

Step 2

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

Releasing

Releases are handled by the CI/CD pipeline. All you need to do is bump the version number in package.json and the pipeline will take care of releasing it to the NPM registry.

FAQs

Package last updated on 23 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts