Ezlib-ui NPM | npm.io

Ezlib-UI

Creators

Oliver Hyryläinen, Joonas Niskanen, Daniel Tarsalainen, Miska Vivolin and Miika Vähänen.

What is Ezlib-UI?

A react library designed for programmers looking for a stylish template for their application, which when provided with raw data, operates as a ready-to-use application. Ezlib-UI is a quick and easy mobile-friendly component package, which is highly customizable for your own taste. In a nutshell, we provide our users a single npm package with multiple components, which is a ready-made react website template containing switchable dark mode style.

Get started

This command installs the component and any packages that it depends on.

npm

npm install ezlib-ui or npm i ezlib-ui

yarn

yarn add ezlib-ui

Users can import individual components they want to use by typing them into their js. file: import { Table, Button, Navbar, ThemeSwitch } from 'ezlib-ui';. There's also a couple icons to be imported: import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; and import { faSignInAlt } from "@fortawesome/free-solid-svg-icons";. The components are independent of each other so it's possible to import only one or two components if need be. Lastly the individual components, which take in props, need to be rendered.

Usage

The program can be created as follows: (For react beginners we recommend copying the following code to your application and work your way from there)

import React from "react";
import { Table, Button, Navbar, ThemeSwitch } from 'ezlib-ui';
import { faSignInAlt } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";


export default function App() {

const links = [
  { name: "Home", destination: "/home" },
  { name: "Contact", destination: "/contact" },
  { name: "About", destination: "/about" },
  { name: "Pictures", destination: "/pictures" }
]

const modalData = [
  {
    text: "Log in",
    icon: <FontAwesomeIcon icon={faSignInAlt} />,
    content: (
      <div>
        <h1> Log in
        </h1>
        <form id="login-form">
          <input type="text" placeholder="Email" />
          <br />
          <input type="password" placeholder="Password" />
          <br />
          <div className="forgotText">
            <a href="url" >Forgot your password?</a>
          </div>
          <Button id={"login-button"} text={<div> Log in </div>} />
        </form>
      </div>
    )
  },
  {
    text: "Sign up",
    content: (
      <div>
        <h1> Sign up </h1>

        <form id="signup-form">
          <input type="text" placeholder="First Name" />
          <br />
          <input type="text" placeholder="Last Name" />
          <br />
          <input type="text" placeholder="Email" />
          <br />
          <input type="text" placeholder="Password" />
          <br />
          <input type="text" placeholder="Confirm password" />
          <br />
          <div className="forgotText"><a href="url"  >Already a member? Sign in </a></div>
          <Button id={"signup-button"} text={<div> Sign up </div>} />
        </form>
      </div>
    )
  }
]

const tableHeader = [
  { header: "Name", property: "name" },
  { header: "Number", property: "number" },
  { header: "State", property: "hometown" },
  { header: "Picture", property: "picture" }
]

const tableList = [
  { name: "Daniel", number: "056239123", hometown: "Tuusula", picture: (<img src="https://image.laji.fi/MM.133557/iso-orava_Jen_Goellnitz_CC_BY-NC-SA_1_FI.jpg" alt="Logo" height="70px" width="70px" />) },
  { name: "Miska", number: "056239854", hometown: "Helsinki", picture: (<img src="http://www.suomensiiliyhdistys.fi/wp-content/uploads/2012/07/suklaa.jpg" alt="Logo" height="70px" width="70px" />) },
  { name: "Miika", number: "056876123", hometown: "Vantaa", picture: (<img src="https://qph.fs.quoracdn.net/main-qimg-c63bc4aeebeffe10a3697a62176fd978-lq" alt="Logo" height="70px" width="70px" />) },
  { name: "Joonas", number: "056239763", hometown: "Korvatunturi", picture: (<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQCiFkS-c5cwEDQE-ynNBqjsKeAx_mnHgURpHFNFAkee7L3pMQDMavq4el2U7ddfKLrXvA&usqp=CAU" alt="Logo" height="70px" width="70px" />) },
  { name: "Oliver", number: "056249623", hometown: "Addis Abeba", picture: (<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBbW_5qGdM57K3D1edFkneXfRqw9uzlVsdjA&usqp=CAU" alt="Logo" height="70px" width="70px" />) }
]

  return (
    <div>
      <Navbar links={links} modalData={modalData}>
        <ThemeSwitch />
      </Navbar>
      <Table parentData={tableList} parentHeaders={tableHeader} />
      <h1>Header</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
  )
}

Which would look like this:

Navbar

const links

const links -table takes in objects, which have name and destination -attributes. These objects create links to the navbar, which by pressing, redirect the user to the location, which is defined in the destination -attribute.

Modal

const modalData

const modalData -table takes in objects, which have text, icon and content -attributes. each object in modalData acts as a separate independent modal window. The text -attribute creates a link to the navbar, which by pressing, open the modal window. The icon -attribute creates a neat icon for the modal link.

The content -attribute takes in jsx-code, through which modal-window contents are defined. The user can create new input fields for example.

Table component

const tableHeader

const tableHeader -table takes in objects, which have header and property -attributes. The header attribute is the name of the element, which doesn't appear in the code. The property -attribute creates the text for each individual object in the table header.

const tableList

const tableList -table takes in objects, which by default have name, number, hometown and picture -attributes. These objects will appear as rows in the table component. There's no limit to objects here and there's a built in pagination functionality in the component. User's can create more attributes for the objects, but it's recommended to increase the number of header objects, so that there are as many const header -objects as there are const tableList -attributes. Otherwise the table won't look optimal.

Table prop rowAmount

The rowAmount prop in the table component receives a number that determines the amount of rows shown in a single table page.

Card

Card component receives four props: image, text, title, button. Each prop is optional.

image receives a URL link of an image
text receives text that will be used in the description of the card
title receives a string that will be used as the title of the card

button receives a jsx component of the users choice. Usually a button or an <a> tag with a link.

example:

<Card 
    image="https://cdn.discordapp.com/attachments/764051613810950183/917766866687131658/unknown.png"
     text="A freshly baked pizza with tasty toppings" 
     button={<Button text="Learn more" size="medium"/>}
     title="Stone oven pizza"
/>

result:

TextContainer

TextContainer is a container for text elements. The purpose of this component is to display text in a way that it matches with the theme. example:

 <TextContainer>
      <h1>Header</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
</TextContainer>

result:

Maps

The Maps component displays a Google Maps location of the user's choice. The user can adjust the width, height, location and zoom level with the appropriate props.

width prop determines the width of the map.
height prop determines the height of the map.
location prop determines the location in the map.
zoom level determines how closely zoomed the map is.

example:

<Maps 
   width={"100%"} 
   height={400} 
   location={Hermannin rantatie}
   zoom={16}
 />

result:

Codesandbox try it yourself

https://codesandbox.io/s/modest-resonance-j3sjh?file=/src/App.js

Style design

Our styles are done with css and can be found from the styles.css file. Ezlib-UI has a built-in dark mode, which can be switched to light mode by pressing the moon symbol. Dark mode can again be activated by pressing the sun symbol.