https://github.com/domparty/component-library

Our white label component library. Filled with functional components to help you kick-start your project 🚀
https://github.com/domparty/component-library

component-library components kick-start preact react storybook whitelabel

Last synced: 29 days ago
JSON representation

Our white label component library. Filled with functional components to help you kick-start your project 🚀

• Host: GitHub
• URL: https://github.com/domparty/component-library
• Owner: domparty
• Created: 2020-03-28T13:45:55.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T17:55:12.000Z (almost 2 years ago)
• Last Synced: 2024-10-23T03:27:58.634Z (2 months ago)
• Topics: component-library, components, kick-start, preact, react, storybook, whitelabel
• Language: JavaScript
• Homepage: https://domparty.com/
• Size: 1.55 MB
• Stars: 12
• Watchers: 5
• Forks: 1
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Domparty - Component library

A white label component library, ready for you to style. Unbiased on how styling should look on your

website, while giving you the handles to kick-start you application with some helpful functional components.

## Instructions

Install the component library using `npm i @domparty/fe`. This will make the library available for your project.

Because @domparty/fe uses Goober internally to provide all neat CSS tricks, first implement our provider into your application.

### Using Preact?

If you're more into speedy apps, we have also implemented a provider for you! Instead of importing the provider from `@domparty/fe/core`,

import the provider from `@domparty/fe/core/preact`. This way your application is using the Pragma from Preact, instead of React.

### Default React apps

For default React apps, the following snippet can be used.  

_use `import { Provider } from '@domparty/fe/core/preact';` for Preact_

```javascript

import React from 'react';

import { Provider } from '@domparty/fe/core';

export default () => (

  

    

  

);

```

### Next.js apps

To implement @domparty/fe into Next.js make sure the \_app.js file implements the  component.

```javascript

import React from 'react';

import { Provider } from '@domparty/fe/core';

export default ({ Component, pageProps }) => (

  

    

  

);

```

## SSR (server-side rendering)

To make sure all styles are rendered correctly on the server. The component library exports Goobers' `extractCss` function for you to implement.

To use this feature in Next.js apps, make sure the `getInitialProps` in your \_document file uses this function.

```javascript

import Document, { Head, Main, NextScript } from 'next/document';

import { extractCss } from '@domparty/fe/core';

export default class MyDocument extends Document {

  static getInitialProps({ renderPage }) {

    const page = renderPage();

    // Extrach the css for each page render

    const css = extractCss();

    return { ...page, css };

  }

  render() {

    return (

      

        

          

        

        

          

          

        

      

    );

  }

}

```

# License

[MIT](https://oss.ninja/mit/domparty/)