@dulliag/components
Topics
Installation
-
Install the npm-package using
npm i @dulliag/components -
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 forclose
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
- Create a new build using
npm run prepare
If the build was successful we proceed with the following steps...
-
Increase the version using the command
npm version [major|minor|patch] -
Make sure you are logged in
npm login -
After this publish this package by using the
npm publish --access publiccommand