@dulliag/components
TypeScript icon, indicating that this package has built-in type declarations

0.7.1 • Public • Published

@dulliag/components

npm npm NPM

Topics

Installation

  1. Install the npm-package using npm i @dulliag/components

  2. Import required files in your index.(js|jsx|ts|tsx) and index.html which is located in your public folder

<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
  />
</head>
import '@dulliag/components/style/master.scss';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'popper.js/dist/popper.min.js';
import 'jquery/dist/jquery.min.js';

Make sure you have react-router-dom(npm i react-routerdom) (and npm i @types/react-router-dom -D if you're using Typescript) installed for using the Breadcrumb, Navbar and Footer.

Like this

import { BrowserRouter as Router, Switch } from 'react-router-dom';
import { Navbar, Breadcrumb, Footer } from '@dulliag/components';

<Router>
  <Navbar />
  <Breadcrumb />
  {/* Website content goes here... */}
  <Footer />
</Router>;

This package contains...

CookieDisclaimer

import { CookieDisclaimerProps, CookieDisclaimer } from '@dulliag/components';

<CookieDisclaimer cookieName="cookies" />;

Breadcrumb

import { BreadcrumbProps, Breadcrumb } from '@dulliag/components';

<Breadcrumb defaultPathName="DulliAG" />;

Toast

import {
  IToast,
  ToastContext,
  ToastContextProvider,
} from '@dulliag/components';

<ToastContextProvider>{/* children */}</ToastContextProvider>;

How to use...

If no type-value is given the default type is set to success. You don't need to give an value for close

import React, { FC, useContext, useState } from 'react';
import {
  CookieDisclaimer,
  ToastContextProvider,
  ToastContext,
  Navbar,
  Breadcrumb,
  Footer,
} from '@dulliag/components';

<ToastContextProvider>
  <CookieDisclaimer />
  <Navbar links={...} />
  <Breadcrumb />
  <TestSection />
  <Footer props={...} />
</ToastContextProvider>

const TestSection: FC = () => {
  const { toasts, setToasts, addToast } = useContext(ToastContext);
  const [name, setName] = useState<string>("");

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();

    // It's not recommended to use setToasts, use addToast instead to push a new toast
    // setToasts(list => [...list, {
    //   type: "info",
    //   text: `Welcome ${name}`,
    //   close: {
    //     text: "Logout",
    //     action: () => {/*code...*/}
    //   }
    // }])

    addToast({
      type: "info",
      text: `Welcome ${name}`,
      close: {
        text: "Logout",
        action: () => {/*code...*/}
      }
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input placeholder="Enter your name..." onChange={(e) => setName(e.target.value)}>
      <button type="submit">Fire toast</button>
    </form>
  );
}

Navbar

import { NavbarLink, NavbarProps, Navbar } from '@dulliag/components';

<Navbar
  brand="DulliAG"
  badge="Beta"
  links={NavbarLink[]}
/>;

Footer

import { FooterLink, FooterAd, FooterAuthor, FooterProps, Footer } from '@dulliag/components';

<Footer
  links={FooterLink[]}
  partner={FooterLink[]}
  other={FooterLink[]}
  ad={FooterAd}
  author={FooterAuthor}
  version={string}
/>;

Spinner

import { SpinnerProps, Spinner } from '@dulliag/components';

<Spinner small={true} large={false} />;

How to build

  1. Create a new build using npm run prepare

If the build was successful we proceed with the following steps...

  1. Increase the version using the command npm version [major|minor|patch]

  2. Make sure you are logged in npm login

  3. After this publish this package by using the npm publish --access public command

Package Sidebar

Install

npm i @dulliag/components

Homepage

dulliag.de

Weekly Downloads

1

Version

0.7.1

License

MIT

Unpacked Size

121 kB

Total Files

32

Last publish

Collaborators

  • tklein1801