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

    0.6.4 • 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 {
      Toast,
      ToastList,
      ToastContext,
      useToastContext,
      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 and action

    import React, { FC, useState } from 'react';
    import {
      CookieDisclaimer,
      ToastContextProvider,
      useToastContext,
      Navbar,
      Breadcrumb,
      Footer,
    } from '@dulliag/components';
    
    <ToastContextProvider>
      <CookieDisclaimer />
      <Navbar links={...} />
      <Breadcrumb />
      <TestSection />
      <Footer props={...} />
    </ToastContextProvider>
    
    const TestSection: FC = () => {
      const addToast = useToastContext();
      const [name, setName] = useState<string>("");
    
      const handleSubmit = (event: React.FormEvent) => {
        event.preventDefault();
        // {
        //   type: "success" || "info" || "error",
        //   text: "This some text!",
        //   close: "ALERT",
        //   action: () => alert("You have clicked the button!")
        // }
        addToast({
          type: "error",
          text: `Welcome ${name}`,
        });
      }
    
      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

    Install

    npm i @dulliag/components

    Homepage

    dulliag.de

    DownloadsWeekly Downloads

    16

    Version

    0.6.4

    License

    MIT

    Unpacked Size

    129 kB

    Total Files

    32

    Last publish

    Collaborators

    • tklein1801