Quinten  Boehm

Quinten Boehm

1660120744

A Simple Sign in and Sing Up Template Built with React and Material UI

Getting Started

A simple sign in and sign up template built with React and Material UI. With complete input validation using formik and yup, making your life easy.

Product Preview

Prerequisites

  • npm

Installation

To get started with the project.

  1. Clone the repo
  2. Install NPM packages
  3. Start the application

Prerequisites

  • npm
npm install npm@latest -g

Installation

To get started with the project.

  1. Clone the repo
git clone https://github.com/eric-ricky/auth-mui-template.git
  1. Install NPM packages
npm install
  1. Start the application
npm start

Contact

Eric Ricky - @ricky_erickk

Linked In - Eric Otieno

Project Link: https://github.com/eric-ricky/sqaub-landing-page

(back to top)

Built With


Author: eric-ricky
Source code: https://github.com/eric-ricky/auth-mui-template
License: MIT license

#react-native #materialui #javascript 

A Simple Sign in and Sing Up Template Built with React and Material UI

Build a Portfolio Website in Python and JavaScript

Portfolio Website in Python and JavaScript | Django 4, Next.js 12, Material UI 5 and PostgreSQL

This is a portfolio website built using Django 4, Next.js 12, and Material UI 5 that uses a PostgreSQL database to store data.

Prerequisites

Install the following prerequisites:

  1. Python 3.10.5
  2. Node.js 18.6.0
  3. PostgreSQL 14.4
  4. Visual Studio Code

Installation

Backend

1. Create a virtual environment

From the root directory run:

cd backend
python -m venv venv

2. Activate the virtual environment

From the backend directory run:

On macOS:

source venv/bin/activate

On Windows:

venv\scripts\activate

3. Install required backend dependencies

From the backend directory run:

pip install -r requirements.txt

4. Set up a PostgreSQL database

With PostgreSQL up and running, in a new Terminal window run:

dropdb --if-exists portfolio

Start psql, which is a terminal-based front-end to PostgreSQL, by running the command:

psql postgres

Create a new PostgreSQL database:

CREATE DATABASE portfolio;

Create a new database admin user:

CREATE USER yourusername WITH SUPERUSER PASSWORD 'yourpassword';

To quit psql, run:

\q

5. Set up backend environment variables

From the backend directory run:

touch config/.env

The touch command will create the .env file in the backend/config directory. This command works on Mac and Linux but not on Windows. If you are a Windows user, instead of using the command line, you can create the .env file manually by navigating in Visual Studio Code to the Explorer, clicking on the config directory (inside the backend directory), and selecting the option New File.

Next, declare environment variables in the .env file. Make sure you don't use quotation marks around the strings.

SECRET_KEY=yoursecretkey
DEBUG=TRUE
DATABASE_NAME=portfolio
DATABASE_USER=yourusername
DATABASE_PASS=yourpassword
DATABASE_HOST=localhost
FRONTEND_URL=http://localhost:3000

6. Run migrations

From the backend directory run:

python manage.py makemigrations
python manage.py migrate

7. Create an admin user to access the Django Admin interface

From the backend directory run:

python manage.py createsuperuser

When prompted, enter a username, email, and password.

Frontend

1. Install required frontend dependencies

From the root directory run:

cd frontend
npm install

2. Set up frontend environment variables

From the frontend directory run:

touch .env

The touch command will create the .env file in the frontend directory. This command works on Mac and Linux but not on Windows. If you are a Windows user, instead of using the command line, you can create the .env file manually by navigating in Visual Studio Code to the Explorer, clicking on the frontend directory, and selecting the option New File.

Next, declare environment variables in the .env file. Make sure you don't use quotation marks around the strings.

BACKEND_HOST=127.0.0.1
BACKEND_URL=http://127.0.0.1:8000

Run the application

To run the application, you need to have both the backend and the frontend up and running.

1. Run backend

From the backend directory run:

python manage.py runserver

2. Run frontend

From the frontend directory run:

npm run dev

3. View the application

Go to http://localhost:3000/ to view the application.

Add data to the application

Add data through Django Admin.

Go to http://127.0.0.1:8000/admin to access the Django Admin interface and sign in using the admin credentials.

Customize the application

This section describes how to customize the application.

Changing Section Titles and Subtitles

1. About

To modify the title and subtitle of the About section, make changes in the frontend/src/components/About.js file.

2. Projects

To modify the title and subtitle of the Projects section, make changes in the frontend/src/components/Projects.js file.

3. Technologies

To modify the title and subtitle of the Technologies section, make changes in the frontend/src/components/Technologies.js file.

4. Testimonials

To modify the title and subtitle of the Testimonials section, make changes in the frontend/src/components/Testimonials.js file.

5. Contact

To modify the title and subtitle of the Contact section, make changes in the frontend/src/components/Contact.js file.

Changing Colors

To modify the colors in the application, make changes in the frontend/src/theme/theme.js file.

Changing Fonts

To modify the fonts in the application, first, add a new font to the frontend/src/pages/_document.js file, and then make changes in the frontend/src/theme/typography.js file.

Changing Logo

To modify the logo in the application, make changes in the frontend/src/layout/Header.js and frontend/src/layout/Sidebar.js files.

Download Details:
 

Author: BobsProgrammingAcademy
Download Link: Download The Source Code
Official Website: https://github.com/BobsProgrammingAcademy/portfolio-website-django-next.js 
License: MIT license


Build a Portfolio Website in Python and JavaScript with Video Tutorial

In this video, we present a portfolio website built using Django 4, Next.js 12, and Material UI 5. This project uses a PostgreSQL database to store data. In this video, we will show you the project and explain how to install and set up everything.

00:00 Intro & Project Overview
02:19 Responsive Design
03:02 Tech Stack 
04:36 Installation 
12:58 Adding Data via Django Admin 
19:51 Outro

Royalty Free Music from Bensound: https://www.bensound.com/

Subscribe: https://www.youtube.com/c/BobsProgrammingAcademy/featured 

#python #javascript #postgresql #materialui 

Build a Portfolio Website in Python and JavaScript
React Dev

React Dev

1657590276

How to Create Login and Signup Form With Material UI And React

In this video you will learn how to create login and signup form in Material UI

Material-UI (MUI) is a CSS framework that provides React components out-of-the-box and follows Google’s Material Design launched in 2014. MUI makes it possible to use different components to create a UI for a company’s web and mobile apps. Google uses Material Design to guarantee that no matter how users interact with the products they use, they will have a consistent experience. Material Design includes guidelines for typography, grid, space, scale, color, images, etc. And it also allows designers to build deliberate designs with hierarchy, meaning, and a focus on results.

Subscribe: https://www.youtube.com/channel/UCaKqU7lmR4wQ5Bj9F9E9i_Q/featured 

#materialui #react 

How to Create Login and Signup Form With Material UI And React

A Ready to Use Boilerplate for Starting React Projects

material-ui-recoil-template

A ready to use boilerplate for starting [experimental] react projects

Initialized with Create-React-App flavored with:

Chucknorris Challenge

  • Dieses Template dient als Basis für ein paar Aufgaben
  • Im Template befindet sich bereits alles was man so braucht
  • Als Beispiel wurde die https://api.chucknorris.io/ API angebunden, es wird immer ein zufälliger Witz geladen

1. Challenge: Template

1.1. Template auschecken

1.2. Node installieren

1.3. Template starten

  • Gehe mit dem Terminal in deinem Ordner, in dem du das Template gecloned hast z.B. Documents/Github/material-ui-recoil-template
  • nun installiere zunächst die Dependencies mit: npm install
  • danach kannst du das Webprojekt starten mit: npm start

1.4. Template im Browser aufrufen

1.5. Code öffnen mit VS Code

  • Nun schauen uns wir den SourceCode von der WebApp an
  • Installiere dir hierfür VS-Code
  • Öffne in VS-Code den geklonten Ordner /material-ui-recoil-template

1.6. Erste Änderung

  • Öffne in dem Projekt, dass du in VSCode offen hast das File HomePage.tsx
  • Ändere die Überschrift "Home" zu irgendwas anderem
  • Nun müsstest du instant die Änderungen im Browser sehen
  • Falls nicht, gehe in ein Terminal und führe in deinem Projektordner npm start aus

2. Challenge: Hintergrundwissen

2.1 Was ist React?

  • Beschäftige dich mit der Doku von React: https://reactjs.org/
  • Du solltest danach folgendes wissen:
    • Was ist JSX?
    • Was ist eine StatefulComponent?
    • Was sind Props?
    • Was sind Hooks?
  • natürlich kannst du neben der offiziellen Doku auch viele andere Quellen nutzen

2.2 Komponenten Library Material-UI

  • Material-UI ist ein Design von Google
  • Dieses Design wurde von einem Typen namens Olivier Tassinari in React nach implementiert
  • Dadurch können wir diese OpenSource Komponenten nutzen und müssen nicht jeden Button etc. neu erfinden, sondern können direkt auf etliche fertige und ziemlich schöne Komponenten zugreifen
  • diese kann man sich hier anschauen: https://next.material-ui.com/
  • Du kannst ruhig mal alle durchklicken, um ein Gefühl dafür zu bekommen

2.3 Typescript

  • Wir nutzen statt Javascript eine sehr ähnliche "Variante" und zwar Typescript
  • Lies dir mal die erste Seite der Doku durch
  • Du solltest nach einer (längeren) Recherche folgendes Wissen:
    • Was ist eine typisierte Sprache?
    • Welche typisierten Sprachen gibt es noch?
    • Welche untypisierten Sprachen gibt es noch?
    • Welche Vorteile hat Typescript?
    • Wie sehr unterscheidet sich Typescript von Javascript?
    • Kann ein Browser Typescript interpretieren? Bzw. kann Typescript direkt im Browser ausgeführt werden?

3. Challenge: Styling

3.1 CSS

  • Das Styling im Web basiert letztendlich immer auf CSS
  • Was CSS ist kannst dir z.B. hier anschauen
  • Mit der Material-UI Library kommen ein paar Erleichterungen mit, sodass man z.B. CSS direkt im Typescript-File schreiben kann: https://next.material-ui.com/styles/basics/

3.2 Eine coole 404 Seite gestalten

4. Challenge: Favoriten

  • Wenn man im Template einen Witz gut findet, soll man ihn zu seinen Favoriten hinzufügen können
  • Dazu gibt es bereits eine Seite, auf der eine Liste später angezeigt werden kann: FavoritesPage.tsx
  • Ziel: Liste anzeigen mit Favoriten

4.1 Globales State Management

  • Jede Component kann ihren eigenen State haben. Der State kann in Form von Props auch an den Kindern übergeben werden. Muss aber der State von einem Ast auf den nächsten wird diese Methode schnell aufwendig und unübersichtlich. Darum brauchen wir für manche Daten ein "globales Statemanagement"
  • In diesen Template verwenden wir hierfür recoil
  • Da gibt's ein gutes Video, indem die Funktionsweise erklärt wird: https://youtu.be/_ISAA_Jt9kI
  • Der aktuelle Chucknorris Witz auf der HomePage wird in einem solchen "globalen State" gehalten, damit mehrere Komponenten problemlos darauf zugreifen können und diesen ggf. verändern können. Dies findest du im Ordner src/state
  • Der Witze selbst kommen von der Chucknorris API. Der Request ist getrennt vom State und befindet sich im Ordner /api

4.2 Favoriten im State

  • Nun brauchen wir eine Liste mit Jokes als Favoriten im State
  • Immer wenn man auf den Stern-Button auf der HomePage drückt, soll der entsprechende Witz zu dieser Liste hinzugefügt werden
  • Die Liste wird dann in der FavoritesPage gelesen und angezeigt
  • Dafür brauchen wir keine Request in /api und damit auch keine selector. Recoil-Atoms werden vollkommen ausreichen.
  • Als Beispiel kann man sich anschauen, wie ein einfacher Boolean-Wert gehalten wird, wie z.B. der drawerOpenState

5. Challenge: Random Cat

Neben Chucknorris Witzen wäre das Prinzip auch für Katzen Fotos cool. Dazu gibt es auch eine public API: https://cataas.com/cat mit folgendem Queryparameter bekommt man ein JSON zurück: https://cataas.com/cat?json=true

5.1 Neue Seite mit zufälligem Katzenbild

  • Lege eine neue Seite in /pages an, die zufällige Katzenbilder laden kann
  • Im /model brauchen wir einen Datentyp CatPic, der das JSON von https://cataas.com/cat?json=true abbilden kann
  • Zusätzlich brauchen wir auch wieder einen State ähnlich, wie der currentJokeState

5.2 Favorisierte Katzen

  • Auf der existierenden FavoritesPage.tsx soll es einen Tab (oder irgendwas ähnliches geben), damit man auch Katzenbilder-Favoriten sehen kann
  • Ähnlich wie in Challenge 4 brauchen wir hier auch wieder eine State Liste mit Katzenbildern

6. Challenge: Eigene Witze

  • Neben den Witzen von Chucknorris, wäre es ganz gut, wenn man auch eigene Witze über ein Textfeld eingeben könnte
  • Diese können entweder gleich zu den Favoriten, oder auch in einen separaten State gespeichert werden
  • Die eignen Witze können auch in der Favoriten-Liste angezeigt werden, sollen aber gekennzeichnet sein, bzw. sich durch z.b. ein Icon unterscheiden

Author: innFactory
Source code: https://github.com/innFactory/material-ui-recoil-template
License: MIT license

#react  #materialui #typescript 

A Ready to Use Boilerplate for Starting React Projects

Material Ui Dropzone: A Material-UI File Upload Dropzone for React

material-ui-dropzone

Material-UI-Dropzone is a set of React components using Material-UI and is based on the excellent react-dropzone library.

These components provide:

  • File Upload Dropzone
  • File Upload Dropzone inside of a Dialog

Additionally, the File Upload Dropzone features some snazzy "File Allowed/Not Allowed" effects, previews and alerts.

Installation

npm install --save material-ui-dropzone

or

yarn add material-ui-dropzone

Support

material-ui-dropzone complies to the following support matrix.

versionReactMaterial-UI
3.x16.8+4.x
2.x15.x or 16.x3.x or 4.x

Demo

Full documentation and samples are available here https://yuvaleros.github.io/material-ui-dropzone.

Preview: Dialog Component with drag'n'drop effects for accepted and rejected files.

drawing 

 

Disclaimer: Drag'n'drop handling has some known limitations, see here for more details.

Components

DropzoneArea

This components creates the dropzone, previews and snackbar notifications without a dialog

import React, {Component} from 'react'
import {DropzoneArea} from 'material-ui-dropzone'

class DropzoneAreaExample extends Component{
  constructor(props){
    super(props);
    this.state = {
      files: []
    };
  }
  handleChange(files){
    this.setState({
      files: files
    });
  }
  render(){
    return (
      <DropzoneArea
        onChange={this.handleChange.bind(this)}
        />
    )
  }
}

export default DropzoneAreaExample;

DropzoneDialog

This component provides the DropzoneArea inside of a MaterialUI Dialog.

import React, { Component } from 'react'
import {DropzoneDialog} from 'material-ui-dropzone'
import Button from '@material-ui/core/Button';

export default class DropzoneDialogExample extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            files: []
        };
    }

    handleClose() {
        this.setState({
            open: false
        });
    }

    handleSave(files) {
        //Saving files to state for further use and closing Modal.
        this.setState({
            files: files,
            open: false
        });
    }

    handleOpen() {
        this.setState({
            open: true,
        });
    }

    render() {
        return (
            <div>
                <Button onClick={this.handleOpen.bind(this)}>
                  Add Image
                </Button>
                <DropzoneDialog
                    open={this.state.open}
                    onSave={this.handleSave.bind(this)}
                    acceptedFiles={['image/jpeg', 'image/png', 'image/bmp']}
                    showPreviews={true}
                    maxFileSize={5000000}
                    onClose={this.handleClose.bind(this)}
                />
            </div>
        );
    }
}

Author: pandemicode
Source code: https://github.com/pandemicode/material-ui-dropzone
License: MIT license

#react #materialui 

Material Ui Dropzone: A Material-UI File Upload Dropzone for React

Material Icons React: Google Material Icons Implementation for React

material-icons-react

NOTE: Version 1.0.4 release

  • Demo app updated
  • Fix for #28

NOTE: Version 1.0.3 release

  • Demo app added
  • Fix for #1
  • Fix for #11
  • Fix for #12
  • Fix for #13
  • Passing in className prop will replace the default icon styles, defaultColor and inactive styles. Own styles for these should be provided if className prop is defined.

Introduction

This package provides a convenient react component for using Google's Material Icons in your react application.

Features

Usage

Import module using the following statement.

import MaterialIcon, {colorPalette} from 'material-icons-react';
  1. Rendering an icon is straightforward.
<MaterialIcon icon="dashboard" />
<MaterialIcon icon="alarm_on" />
  1. Change the icon size by using the size property.
<MaterialIcon icon="dashboard" size='large' />
<MaterialIcon icon="dashboard" size={100} />
  1. Invert the icon by using the invert property.
<MaterialIcon icon="dashboard" invert />
  1. Make the icon inactivate by using the inactive property.
<MaterialIcon icon="dashboard" inactive />
  1. Change the color of an icon.
<MaterialIcon icon="dashboard" color={colorPalette.amber._200} />
<MaterialIcon icon="dashboard" color={colorPalette.amber.A700} />
  • Using a custom color.
<MaterialIcon icon="dashboard" color='#7bb92f' />

Showing a preloader until the icon is rendered(For slow connections)

  1. CSS
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #921515;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
  1. Preloader element
let loader = <div className="lds-ripple"><div></div><div></div></div>
  1. Icon
<MaterialIcon icon="dashboard" preloader={loader} />

Icon size matrix

AliasSize
tiny18px
small24px
medium36px
large48px

Contributions

Please feel free to create PR for any improvements and contributions.


Author: logtrace
Source code: https://github.com/logtrace/material-icons-react
License: MIT license

#react #javascript #materialui 

Material Icons React: Google Material Icons Implementation for React

Next SMRT | Next.js, Styled Components, Material-UI, Redux & TS

Next-SMRT

Next.js, Styled Components, Material-UI, Redux (With Redux-Toolkit), Typescript

A lot of the next.js examples have some of those features but not all together. So I decided to roll them all into one boilerplate.

I use it to kickstart everything I do now. Works great in production and comes with docker batteries included.

Example TODO List App

Example To Do App

Features

Uses

Using cdn

  • material-icons font
  • roboto-font

Installation

git clone https://github.com/csprance/next-smrt.git

or just click the Use This Template button above.

Setup

set SEO variables

src/constants/env.ts

// for meta tag <og & twitter>
export const SITE_NAME = ''
export const SITE_TITLE = ''
export const SITE_DESCRIPTION = ''
export const SITE_IMAGE = ''

Environment Install Instructions

Development

Installation

npm install
npm run dev # run

Test

npm run test # test
npm run test:watch
npm run test:coverage # report coverage

Production

npm install
npm run build # create .next directory
npm start # start server

Docker

Assumes traefik is running

  • run docker-compose up -d --build
  • Visit http://next-smrt.localhost

Check out the other docker-compose files for more uses and the Dockerfile for the image that will be built to run the app

Download Details:
Author: csprance
Source Code: https://github.com/csprance/next-smrt
License: Unlicense license

#nextjs #react #javascript #typescript #docker #materialui 

Next SMRT | Next.js, Styled Components, Material-UI, Redux & TS

NextJS with Redux and Material-UI Example

A boilerplate NextJS with Redux and Material UI

Getting Started

Installing

Cloning the project.

git clone https://github.com/joaopaulomoraes/nextjs-with-redux-and-material-ui.git nextjs-with-redux-and-material-ui

Access the project directory.

cd nextjs-with-redux-and-material-ui

Install dependencies.

yarn install

Serve with hot reload at http://localhost:3000.

yarn dev

The idea behind the example

In this example, we will display a counter that is initialized with a value of 0 and will be updated with each click. The first rendering is happening on the server, then the browser takes over. To illustrate this, the rendered counter will have a value of 1 when the app loads and a flag with the dispatch source will be displayed above the counter. From the next clicks that increment / decrement, the counter will receive its new value and the flag with the origin will be updated again with the origin of the dispatch.

Our page is located in pages/index.js, so it will map the / route. To get the initial data for rendering, we are implementing the getInitialProps static method, initializing the redux storage and dispatching the increment action, passing the isServer parameter to identify that the dispatch source is coming from the server. As the component is packaged with next-redux-wrapper, the component is automatically connected to Redux and packaged with the reagent-redux Provider`, which allows us to access the redux state immediately and send the storage to the child components for that they access the state when necessary.

For security, it is recommended to wrap all pages, whether they use Redux or not, so you do not worry about all the child components anymore.

The withRedux function accepts makeStore as the first argument, all other arguments are passed internally to the react-redux connect () function. The makeStore function will receive the initialState as an argument and should return a new instance of redux store every time it is called, no memoisation is required here. See the [full example] (https://github.com/kirill-konshin/next-redux-wrapper#usage) in the Next Redux Wrapper repository. And there's another package [https://github.com/huzidaha/next-connect-redux] available with similar features.

To pass the initial state from the server to the client, we pass as a prop called initialState, so it is available when the client takes control.

The trick here to support the universal redux is to separate the cases for the client and the server. When we are on the server, we want to create a new store every time, otherwise the data from the different users will be mixed. If we are on the customer, we always want to use the same store. This is what we do in store.js

Again, the first render is happening in the server and instead of starting the count at 0, it will dispatch an action in redux that starts the count at 1. This continues to highlight how each navigation triggers a server render first and then a client render second, when you navigate between pages.

Download Details:
Author: joaopaulomoraes
Source Code: https://github.com/joaopaulomoraes/nextjs-with-redux-and-material-ui
License:

#nextjs #react #javascript #redux #materialui 

NextJS with Redux and Material-UI Example
Chloe  Butler

Chloe Butler

1656435600

UseRipple: Material UI Ripple Effect With React

useRipple - Material UI ripple effect

Fully customizable, lightweight React hook for implementing Google's Material UI style ripple effect

useRipple showcase GIF

Installation

npm install use-ripple-hook

or

yarn add use-ripple-hook

Usage

import React from "react";
import useRipple from "use-ripple-hook";

function Button() {
    const [ripple, event] = useRipple();

    return (
        <button ref={ripple} onMouseDown={event}>
            Default Ripple
        </button>
    );
}

Options

Default options

useRipple({
    duration: 450,
    color: "rgba(255, 255, 255, .3)",
    cancelAutomatically: false,
    className: "__useRipple--ripple",
    containerClassName: "__useRipple--ripple-container",
    ignoreNonLeftClick: true,
    timingFunction: "cubic-bezier(.42,.36,.28,.88)",
    disabled: false,
    ref: internalRef,
    onSpawn: undefined,
});

Options reference

PropertyDescriptionTypeDefaultOptional
durationDuration in millisecondsnumber450✔️
colorColor of the ripple effectstringrgba(255, 255, 255, .3)✔️
cancelAutomaticallyIf true, the ripple will begin to cancel after 40% of the durationbooleanfalse✔️
classNameThe ripple element's class namestring__useRipple--ripple✔️
containerClassNameThe container element for the ripplesstring__useRipple--ripple-container✔️
ignoreNonLeftClickIf false, non left click events such as right click and middle click will also trigger ripplesbooleantrue✔️
timingFunctionTransition timing function of the transform animationstringcubic-bezier(.42,.36,.28,.88)✔️
disabledIf true, no ripples will be spawnedbooleanfalse✔️
refOptional outside ref, if unset, internal ref will be usedReact.RefObject<T>undefined✔️
onSpawnA callback which is triggered when a ripple is spawnedoptions.onspawnundefined✔️

options.onSpawn

Type

type OnSpawnCB = (ctx: {
    /** the ripple element */
    readonly ripple: HTMLDivElement;

    /** cancels the current ripple animation */
    readonly cancelRipple: () => void;

    /** the ref to the ripple host element */
    readonly ref: React.RefObject<T>;

    /** the event that triggered the ripple (ts: casting required) */
    readonly event: unknown;

    /** the ripple container element */
    readonly container: HTMLDivElement;
}) => void;

Example

useRipple({
  /* ... */
  onSpawn: ({
    ripple, ref, event, container
  }) => {
    console.table({ ripple, ref, event, container });
  }
});

Perfect circle

As demonstrated in the below GIF, useRipple adjusts the circle size to always for the host element's border box.

useRipple showcase GIF

Higher order function (HOF)

If you want to memoize a configuration for your ripple you can use the built in customRipple() function.

You can override the options you memoized for your custom ripple hook. The two options will be merged.

Usage

import { customRipple } from "use-ripple-hook";

const useMyRipple = customRipple({
    color: "rgb(144, 238, 144, .7)",
    duration: 700,
});

function Button() {
    const [ripple, event] = useMyRipple({}); // Optionally override previous config

    return (
        <button ref={ripple} onMouseDown={event}>
            Memoized Ripple
        </button>
    );
}

This is useful if you want to avoid repetition in your code or if you want multiple different ripple effects for different components.

Examples

For examples of useRipple usage please click here.

Dos and don'ts

✔ Do this:

Using components 👍

import React from "react";
import useRipple from "use-ripple-hook";

function App() {
    return (
        <>
            <Button color="red" />
            <Button color="yellow" />
        </>
    )
}

function Button({ color }) {
    const [ripple, event] = useRipple({ color });

    return (
        <button ref={ripple} onMouseDown={event}>
            Button
        </button>
    );
}

❌ Don't do this:

Sharing references 👎

import React from "react";
import useRipple from "use-ripple-hook";

function App() {
    const [ripple, event] = useRipple();

    /* This will NOT work! Do not do this */
    return (
        <>
            <button color="red" ref={ripple} onMouseDown={even}>
                Button
            </button>
            <button color="yellow" ref={ripple} onMouseDown={even}>
                Button
            </button>
        </>
    )
}

Motivation

I was motivated to create this React hook due to the unfortunate lack of customizable alternatives. The other implementations which I don't wish to disparage lacked key features which I felt were important for this effect.

What I was looking for:

  • Clean unopinionated API
  • Fully customizable
  • Implementation controlled trigger (events)
  • Ripple to linger before fading away (hold down) which can be opted out of

I therefore created this simple yet powerful hook which can be reused, memoized and customized to fit any element and use case.

The philosophy behind this library hinges on the idea that libraries should not unnecessarily limit the user, but merely to provide the means to implement what the user wants. Obviously this is impossible to follow faithfully. However, I've done my best to follow this principle hence the rich options. If that isn't enough, I've provided a callback where you can gain full control over each individual ripple as it spawns.

Contributing

Contributions of any form are appreciated, opening issues on the Github repository as well as creating pull requests are both welcomed for anyone to do.


Author: asplunds
Source code: https://github.com/asplunds/use-ripple
License:

#react-native #react #materialui 

UseRipple: Material UI Ripple Effect With React
Chloe  Butler

Chloe Butler

1656414000

Slack Clone using React, MaterialUI

About The Project

Slack Clone

Description

  • Slack-Clone is a clone of a slack. Implemented using React and Firebase.
  • Behind the backend, I was used React-Firebase for authentication with Google-auth, and highly secure specially for non-authorized users.
  • And I have developed a channel section to add new channels and communicate through these channels.
  • I have used firestore to keep store all the messages spread among the channels or community.
  • And ofcourse our database will be safe under google-firebase security so no worries about securities.

Features

  • The channels or messages are stored in firestore database so quickly accessible via our app.
  • I was used react-router-dom for saving server-side loads or refreshing. this functionality improve the speed for redirect to one component to another without refreshing from server-side it makes life easier, save lots of time and fast to switch without loading or refreshing the whole page.
  • Our data will be in real-time, if any changes make happens in messages or channels then it will automatically changes in our app in real-time no need to refresh our page. the app will be responsive like if you used in Desktop or Mobile devices it render same thing.

Built With

This section should list any major frameworks that you built your project using. Leave any add-ons/plugins for the acknowledgements section. Here are a few examples.

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.\

Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify


Author: MuradRahmanzada
Source code: https://github.com/MuradRahmanzada/Slack-clone
License:

#react-native #react #materialui #slack #firebase 

Slack Clone using React, MaterialUI
Thierry  Perret

Thierry Perret

1652154001

Comment Créer Un Clone Google Docs Avec React, Material UI Et Firebase

Dans cet article, nous allons créer un clone Google Docs à l'aide de React, Material UI et Firebase.

L'application finale ressemblera à ceci :

Capture d'écran-2022-05-08-145537

Si nous cliquons sur un document, il s'ouvrira et nous pourrons le modifier comme bon nous semble.

Capture d'écran-2022-05-08-145643

Et la caractéristique la plus étonnante est que nous pouvons éditer un document en temps réel. Cela signifie que si deux personnes travaillent sur le même document, leurs progrès seront reflétés dans les deux instances.

Mais avant de commencer, assurez-vous que Node est installé sur votre système. Sinon, rendez-vous sur https://nodejs.org/en/download/ pour le télécharger et l'installer.

Configuration de base du projet

Commençons par créer une application React à l'aide de la commande ci-dessous :

npx create-react-app google-docs-clone

Cela installera tous les packages et dépendances dans un dossier local.

Ensuite, naviguez simplement dans le dossier du projet et exécutez npm start pour exécuter l'application.

Capture d'écran-2022-05-07-105724

Nous verrons ici tous ces codes que nous devons supprimer. Nous allons commencer avec une toile vierge.

Créez ensuite un dossier appelé composants. Dans ce dossier, créons un fichier appelé docs.js .

Capture d'écran-2022-05-07-110011

Faites de ce composant un composant fonctionnel, comme ceci :

import React from 'react'

export default function Docs() {
  return (
    <div>
        <h1>docs</h1>
    </div>
  )
}

Maintenant, importez ce fichier dans le fichier App.js principal .

import './App.css';
import Docs from './components/docs';

function App() {
  return (
    <Docs />
  );
}

export default App;

Et nous verrons cette sortie à l'écran :

Capture d'écran-2022-05-07-110713

Clone de Google docs affichant la sortie "docs" dans le coin supérieur gauche

Maintenant, faisons apparaître le titre au centre. Donc, dans docs.js, donnez à la div principale un className de docs-main .

import React from 'react'

export default function Docs() {
  return (
    <div className='docs-main'>
        <h1>Docs Clone</h1>
    </div>
  )
}

Et dans le fichier App.css , ajoutez les styles suivants :

.docs-main{
    text-align: center;
}

Maintenant, notre application ressemble à ceci :

Capture d'écran-2022-05-07-113002

Clone de documents Google avec le titre au centre

Maintenant, nous avons besoin d'un bouton pour ajouter nos documents. Alors, créons-le avec ce code :

import React from 'react'

export default function Docs() {
  return (
    <div className='docs-main'>
        <h1>Docs Clone</h1>

        <button className='add-docs'>
            Add a Document
        </button>
    </div>
  )
}

Et le CSS ressemble à ceci :

.add-docs{
    height: 40px;
    width: 200px;
    background-color: #ffc107;
    border: none;
    cursor: pointer;
}

Importons quelques polices de Google Fonts. Placez ceci en haut du fichier CSS :

@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap');

.docs-main{
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

.add-docs{
    height: 40px;
    width: 200px;
    background-color: #ffc107;
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

Pour ajouter des polices, faites-le simplement dans les noms de classe respectifs.

Comment installer l'interface utilisateur matérielle

Pour installer Material UI, tapez simplement la commande ci-dessous. Si vous souhaitez lire la documentation, rendez-vous sur https://mui.com/ .

npm install @mui/material @emotion/react @emotion/styled

Maintenant, créons un autre composant pour le modal. Nous utiliserons ce modal pour ajouter des documents à la base de données Firebase.  

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';

const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 400,
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4,
};

export default function Modal() {
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);

    return (
        <div>
            <Modal
                open={open}
                onClose={handleClose}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
            >
                <Box sx={style}>
                    <Typography id="modal-modal-title" variant="h6" component="h2">
                        Text in a modal
                    </Typography>
                    <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
                    </Typography>
                </Box>
            </Modal>
        </div>
    );
}

Il s'agit d'un simple composant modal de Material UI. Nous devons maintenant importer ce composant dans notre composant Docs.js.

Et nous devons déplacer quelques éléments de Modal.js vers Docs.js.

const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);

Si nous cliquons sur le bouton Ajouter un document, le modal s'ouvrira en utilisant ces fonctions :

import React, { useState } from 'react';
import Modal from './Modal';

export default function Docs() {
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    return (
        <div className='docs-main'>
            <h1>Docs Clone</h1>

            <button
                className='add-docs'
                onClick={handleOpen}
            >
                Add a Document
            </button>

            <Modal
                open={open}
                setOpen={setOpen}
            />
        </div>
    )
}

Alors, transmettez ces fonctions et états comme accessoires dans le composant modal et recevez-les.

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';

const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 400,
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4,
};

export default function ModalComponent({
    open,
    setOpen,
}) {
    const handleClose = () => setOpen(false);

    return (
        <div>
            <Modal
                open={open}
                onClose={handleClose}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
            >
                <Box sx={style}>
                    <Typography id="modal-modal-title" variant="h6" component="h2">
                        Text in a modal
                    </Typography>
                    <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
                    </Typography>
                </Box>
            </Modal>
        </div>
    );
}

Maintenant, voici à quoi ressemble notre page avec le modal :

Capture d'écran-2022-05-07-115100

Page de clonage Google docs avec modèle affiché

Ajoutons une entrée dans le Modal, pour le nom du fichier.

<Modal
                open={open}
                onClose={handleClose}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
            >
                <Box sx={style}>
                    <input
                        placeholder='Add the Title'
                        className='add-input'
                    />
                </Box>
            </Modal>

Donnons-lui quelques styles avec ce qui suit :

.add-input{
    width: 95%;
    height: 40px;
    outline: none;
    border: 1px solid #676767;
    border-radius: 0px;
    padding: 10px;
    font-family: 'Poppins', sans-serif;
}

Et maintenant, voici à quoi ressemble notre Modal :

Capture d'écran-2022-05-07-115756

Modal avec style ajouté

Ajoutons également un bouton. Nous pouvons copier le bouton Ajouter un document.

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';

const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 500,
    height: 150,
    bgcolor: 'background.paper',
    boxShadow: 24,
    p: 5,
};

export default function ModalComponent({
    open,
    setOpen,
}) {
    const handleClose = () => setOpen(false);

    return (
        <div>
            <Modal
                open={open}
                onClose={handleClose}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
            >
                <Box sx={style}>
                    <input
                        placeholder='Add the Title'
                        className='add-input'
                    />
                    <div className='button-container'>
                        <button
                            className='add-docs'
                        >
                            Add
                        </button>
                    </div>
                </Box>
            </Modal>
        </div>
    );
}

Et le CSS ressemble à ceci :

.button-container{
    text-align: center;
    margin: 30px;
}

Voici à quoi cela ressemble maintenant :

Capture d'écran-2022-05-07-120129

Modal avec style et bouton ajouté

Comment ajouter Firebase à notre application

Maintenant, installons Firebase pour la base de données. Installez simplement Firebase à l'aide de la commande ci-dessous :

npm install firebase

Rendez-vous sur https://firebase.google.com/ et cliquez sur Aller à la console en haut à droite.

Capture d'écran-2022-05-07-120526

Cliquez ensuite sur Ajouter un projet.

Capture d'écran-2022-05-07-120625

Après avoir créé le projet, cliquez sur le bouton de code pour créer une application Web dans Firebase. Donnez-lui un nom et nous sommes prêts à partir.

Capture d'écran-2022-05-07-120803

Maintenant, nous allons ajouter toutes ces données de configuration que nous devons stocker dans notre application React. Alors, créez un fichier appelé firebaseConfig.js et ajoutez-les.

Capture d'écran-2022-05-07-120857

Nous allons avoir besoin de la base de données, alors initialisons-la. Exportez également l'application const et la base de données comme ceci :

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  //Your Firebase Data
};

export const app = initializeApp(firebaseConfig);
export const database = getFirestore(app)

Importez l'application et la base de données dans le fichier App.js. Et transmettez la base de données en tant qu'accessoires au composant Docs. Nous l'utiliserons plus tard pour ajouter des données à Firebase Firestore.

import './App.css';
import Docs from './components/docs';
import { app, database } from './firebaseConfig';

function App() {
  return (
    <Docs database={database}/>
  );
}

export default App;

Et dans le composant Docs. Recevons également l'exportation de la base de données à partir des accessoires.

import React, { useState } from 'react';
import Modal from './Modal';

export default function Docs({
    database
}) {
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    return (
        <div className='docs-main'>
            <h1>Docs Clone</h1>

            <button
                className='add-docs'
                onClick={handleOpen}
            >
                Add a Document
            </button>

            <Modal
                open={open}
                setOpen={setOpen}
            />
        </div>
    )
}

Maintenant, configurons notre base de données Firestore.

Accédez à la base de données Firestore dans la barre latérale gauche, puis cliquez sur Créer une base de données.

Capture d'écran-2022-05-07-121804

Nous allons démarrer notre base de données en mode production. Alors, cliquez sur Suivant, puis sur Activer.

Capture d'écran-2022-05-07-121900

Nous devons rendre publiques les règles de sécurité, juste pour le moment. Alors, cliquez sur Règles dans l'onglet supérieur et modifiez les règles suivantes. Cela signifie que n'importe qui peut écrire des données ou les lire, même sans authentification.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Comment ajouter des données Docs à la base de données Firestore

Maintenant, ajoutons nos données. Mais avant cela, nous devons obtenir les données du champ de saisie.

Donc, dans le composant Docs, créez un état qui contiendra ces données.

const [title, setTitle] = useState('')

Passez le titre et setTitle au composant modal.

<Modal
                open={open}
                setOpen={setOpen}
                title={title}
                setTitle={setTitle}
            />

Recevez-les tous les deux en tant qu'accessoires et définissez-les dans le champ de saisie.

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';

const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 500,
    height: 150,
    bgcolor: 'background.paper',
    boxShadow: 24,
    p: 5,
};

export default function ModalComponent({
    open,
    setOpen,
    title, 
    setTitle
}) {
    const handleClose = () => setOpen(false);

    return (
        <div>
            <Modal
                open={open}
                onClose={handleClose}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
            >
                <Box sx={style}>
                    <input
                        placeholder='Add the Title'
                        className='add-input'
                        onChange={(event) => setTitle(event.target.value)}
                        value={title}
                    />
                    <div className='button-container'>
                        <button
                            className='add-docs'
                        >
                            Add
                        </button>
                    </div>
                </Box>
            </Modal>
        </div>
    );
}

Maintenant, si nous tapons quelque chose dans l'entrée, elle sera stockée dans l' état du titre .

Ensuite, nous avons besoin d'une fonction qui déclenchera les fonctions d'ajout de données, alors créons-la.

Dans Docs.js, créez une fonction et transmettez-la au composant modal :

const addData = () => {
        
}

Recevez-le dans le composant modal et liez-le simplement au bouton Ajouter comme ceci :

<div className='button-container'>
                        <button
                            className='add-docs'
                            onClick={addData}
                        >
                            Add
                        </button>
                    </div>

Maintenant, la fonction addData s'exécutera lorsque nous cliquerons sur le bouton Ajouter.

Maintenant, pour envoyer dynamiquement des données de React à Firebase, importons quelques éléments de Firebase Firestore :

import { addDoc, collection } from 'firebase/firestore';

Ici, nous allons utiliser collectionpour créer une collection de données dans Firebase, et addDoc ajoutera des données à cette collection.

Commençons par créer une référence de collection. Il prendra la base de données que nous avons obtenue de firebaseConfig.js et le nom de la collection que nous voulons utiliser.

const collectionRef = collection(database, 'docsData')

Maintenant, dans la fonction addData, utilisons addDoc . Cette fonction addDoc prendra la référence de la collection et les données elles-mêmes.

const addData = () => {
        addDoc(collectionRef, {
            title: title
        })
        .then(() => {
            alert('Data Added')
        })
        .catch(() => {
            alert('Cannot add data')
        })
    }

Maintenant, ajoutez quelque chose dans la saisie de texte et cliquez sur Ajouter. Il sera ajouté à Firebase Firestore, avec une alerte indiquant que les données ont été ajoutées. Mais si cela échoue, nous obtiendrons "Impossible d'ajouter des données".

Capture d'écran-2022-05-07-123810

Si nous actualisons la base de données, nous verrons cette nouvelle entrée :

Capture d'écran-2022-05-07-123848

Et c'est ainsi que nous ajoutons des données. Fermons également le modal après avoir ajouté les données.

Créez une fonction handleClose et appelez cette fonction juste après le bloc then dans la fonction addData .

const addData = () => {
        addDoc(collectionRef, {
            title: title
        })
        .then(() => {
            alert('Data Added');
            handleClose()
        })
        .catch(() => {
            alert('Cannot add data')
        })
    }

Comment lire les données de Firebase

Maintenant, lisons les données que nous avons ajoutées à Firebase. Nous aurons besoin de la fonction onSnapshot pour cela. La fonction onSnapshot récupère les données en temps réel.

Tout d'abord, importez-le depuis Firebase comme ceci :

import { addDoc, collection, onSnapshot } from 'firebase/firestore';

Ensuite, créez une fonction getData qui se déclenchera lors du chargement de notre page. Nous allons donc mettre cet onSnapshot dans le React useEffect Hook.

const getData = () => {
        onSnapshot(collectionRef, (data) => {
            console.log(data.docs.map((doc) => {
                return {...doc.data(), id: doc.id}
            }))
        })
    }

Ensuite, appelez cette fonction à l'intérieur du crochet useEffect.

useEffect(() => {
        getData()
    }, [])

Capture d'écran-2022-05-08-120757

Mais comme vous pouvez le voir, nous obtenons les données deux fois. C'est parce que nous utilisons la version 18 de React, qui inclut le rendu simultané . C'est pourquoi le crochet useEffect s'exécutera deux fois.

Pour résoudre ce problème, nous devons créer une référence useRef .

const isMounted = useRef()

Ensuite, dans le crochet useEffect, nous devons vérifier si isMounted.current est vrai. Donc, si c'est vrai, nous ne retournerons rien. Et puis nous définirons isMounted.current sur true, et nous appellerons ensuite notre fonction getData.

useEffect(() => {
        if(isMounted.current){
            return 
        }

        isMounted.current = true;
        getData()
    }, [])

Et si nous actualisons maintenant la page, nous n'obtiendrons les données qu'une seule fois.

Capture d'écran-2022-05-08-121500

Maintenant, nous devons inclure ces données dans un état de tableau. Alors, faisons cela.

Créez un état de docsData .

 const [docsData, setDocsData] = useState([]);

Et définissez les données entrantes dans cet état à l'aide de setDocsData .

const getData = () => {
        onSnapshot(collectionRef, (data) => {
            setDocsData(data.docs.map((doc) => {
                return {...doc.data(), id: doc.id}
            }))
        })
    }

Maintenant, mappons notre tableau pour que les données s'affichent dans l'interface utilisateur.

<div>
                {docsData.map((doc) => {
                    return (
                        <div>
                            <p>{doc.title}</p>
                        </div>
                    )
                })}
            </div>

Cela affichera toutes les données dans notre application React.

Capture d'écran-2022-05-08-121859

Nous verrons les deux documents sur notre page. Mais faisons-les apparaître dans une grille. Donnez les conteneurs div classNames de grid-main et grid-child .

<div className='grid-main'>
                {docsData.map((doc) => {
                    return (
                        <div className='grid-child'>
                            <p>{doc.title}</p>
                        </div>
                    )
                })}
            </div>

Et dans le CSS, ajoutez les classes suivantes :

.grid-main{
    display: grid;
    grid-template-columns: auto auto auto auto;
    color: whitesmoke;
    margin-top: 20px;
    gap: 20px;
    justify-content: center;
}

.grid-child{
    padding: 20px;
    background-color: rgb(98, 98, 98);
    width: 300px;
    cursor: pointer;
}

Maintenant, notre application ressemblera à ceci :

Capture d'écran-2022-05-08-122658

Comment obtenir l'ID et rediriger vers la page Modifier les documents

Maintenant, chacun de ces éléments ci-dessus a un ID. Nous utiliserons ces identifiants pour rediriger vers une autre page où nous pourrons modifier les éléments et écrire notre contenu principal.

Pour cela, nous avons besoin de deux packages. L'un est le React-Router pour nous rediriger, et un autre est le React-Quill pour notre éditeur. Installez-les comme ceci :

npm i react-quill react-router-dom@6

Maintenant, configurons le routage vers une autre page. Mais nous avons d'abord besoin d'une autre page. Alors, créons-le.

Créez un composant appelé EditDocs. Faites-en un composant fonctionnel.

import React from 'react'

export default function EditDocs() {
  return (
    <div>EditDocs</div>
  )
}

Pour configurer le routage, accédez à index.js , le point d'entrée de l'application. Enveloppez le <App /> dans BrowserRouter .

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Maintenant, nous pouvons utiliser le routage n'importe où car nous déclarons BrowserRouter au niveau de base.

Maintenant, venez au fichier App.js. Importer des routes et des routes depuis React-Router. Nous ajoutons également l'ID dans le chemin editDocs , afin que nous puissions voir l'ID dans la barre d'adresse.

import { Routes, Route } from "react-router-dom";
import './App.css';
import Docs from './components/docs';
import EditDocs from './components/EditDocs';
import { Routes, Route } from "react-router-dom";
import { app, database } from './firebaseConfig';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Docs database={database} />} />
      <Route path="/editDocs/:id" element={<EditDocs database={database}/>} />
    </Routes>
  );
}

export default App;

Et ajoutez les itinéraires suivants. Si nous allons à '/editDocs/:id' , nous verrons notre page editDocs.

Capture d'écran-2022-05-08-124659

Maintenant, nous devons obtenir l'ID spécifique des documents et l'envoyer à la page editDocs.

Créez une fonction getID et affectez la fonction aux documents.

const getID = () => {

}
<div className='grid-main'>
                {docsData.map((doc) => {
                    return (
                        <div className='grid-child' onClick={() => getID(doc.id)}>
                            <p>{doc.title}</p>
                        </div>
                    )
                })}
            </div>

Maintenant, si nous cliquons sur le document, nous obtiendrons son ID si nous l'enregistrons dans la console.

const getID = (id) => {
        console.log(id)
    }

Capture d'écran-2022-05-08-124956

Envoyons maintenant cet ID à la page editDocs en utilisant useNavigate .

Tout d'abord, importez useNavigate à partir de react-router.

import { useNavigate } from 'react-router-dom';

Ensuite, créez une instance de useNavigate comme ceci :

let navigate = useNavigate();

Ensuite, pour passer l'ID, faites simplement ceci. Nous nous enverrons à la page editDocs, avec l'ID.

const getID = (id) => {
        navigate(`/editDocs/${id}`)
}

Maintenant, recevons notre ID à l'autre bout. Dans le composant editDocs, nous devons utiliserParams de react -router.

Alors, importez-le et créez une instance :

import { useParams } from 'react-router-dom';

let params = useParams();

De plus, si nous le consolons, nous verrons l'ID.

import { useParams } from 'react-router-dom';

let params = useParams();
console.log(params)

Capture d'écran-2022-05-08-125849

Nous pouvons voir que nous obtenons l'ID dans la barre d'adresse ainsi que dans la console.

Maintenant, ajoutons React Quill à notre page editDocs .

import React from 'react';
import { useParams } from 'react-router-dom';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
export default function EditDocs() {
    let params = useParams();
    return (
        <div>
            <h1>EditDocs</h1>

            <ReactQuill />
        </div>
    )
}

Nous devons importer React-Quill et le CSS.

Capture d'écran-2022-05-08-131423

Mais nous pouvons voir que nous avons deux barres d'outils ici. Pour résoudre ce problème, supprimez simplement React.StrictMode de index.js .

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Et nous irons bien.

Capture d'écran-2022-05-08-131534

Maintenant, nous avons besoin d'un état pour ces données React Quill. Alors, créons-le. De plus, nous allons créer une fonction à déclencher lorsque nous tapons.

const [docsDesc, setDocsDesc] = useState('');
    const getQuillData = () => {
        
    }

Maintenant, lions la fonction et l'état à React Quill.

<ReactQuill
   value={docsDesc}
   onChange={getQuillData}
/>

Dans la fonction getQuillData , lions la valeur à l' état docsDesc , en utilisant la fonction setDocsDesc .

const getQuillData = (value) => {
        setDocsDesc(value)
    }

Et nous avons fini ici. Vous pouvez consoler cet état docsDesc pour le vérifier.

Nous avons maintenant l'ID et les données que nous pouvons utiliser pour mettre à jour le document. Alors, faisons cela.

Comment mettre à jour le document

Nous avons besoin de deux choses, updateDoc et la fonction de collecte . Nous allons utiliser une fonction Debounce pour appeler la fonction updateDoc. Cela signifie que lorsque nous aurons fini de taper, après 5 ou 10 secondes, notre fonction updateDoc s'exécutera.

Alors créons une fonction :

const updateDocsData = () => {

}

Nous devons également spécifier la collection. Pour cela, nous avons besoin de la base de données d' App.js. Alors, obtenons-le en utilisant des accessoires.

<Route path="/editDocs/:id" element={<EditDocs database={database}/>} />

Maintenant, créons une référence de collection.

const collectionRef = collection(database, 'docsData')

Maintenant, pour l'anti-rebond, nous avons besoin de updateDocsData dans un crochet useEffect.

useEffect(() => {
        const updateDocsData = () => {

        }
 }, [])

Ajoutons maintenant une fonction setTimeout avec un intervalle. Cela signifie que la fonction s'exécutera après cet intervalle spécifié. Faites un intervalle de 1000 millisecondes ou 1 seconde .

useEffect(() => {
    const updateDocsData = setTimeout(() => {
      
    }, 1000)  
    return () => clearTimeout(updateDocsData)
  }, [])

Maintenant, dans setTimeOut, ajoutons la fonction updateDoc. Ainsi, à l'intérieur de la variable document, nous transmettons collectionRef et l' ID des paramètres. Et puis, le updateDoc prend ce document variable comme premier paramètre.

const updateDocsData = setTimeout(() => {
            const document = doc(collectionRef, params.id)
            updateDoc(document, {

            })
        }, 1000)

Importons également la fonction doc . Il spécifie le document à mettre à jour en utilisant l'ID comme clé primaire.

import {
    updateDoc,
    collection,
    doc
} from 'firebase/firestore';

Passons maintenant les données dans le deuxième paramètre, dans la fonction updateDoc.

useEffect(() => {
        const updateDocsData = setTimeout(() => {
            const document = doc(collectionRef, params.id)
            updateDoc(document, {
                docsDesc: docsDesc
            })
        }, 1000)
        return () => clearTimeout(updateDocsData)
    }, [])

Dans le tableau de dépendances, ajoutez l'état de docsDesc. Ainsi, après avoir tapé quelque chose , la fonction updateDoc s'exécutera après 1 seconde.

useEffect(() => {
        const updateDocsData = setTimeout(() => {
            const document = doc(collectionRef, params.id)
            updateDoc(document, {
                docsDesc: docsDesc
            })
            .then(() => {
                alert('Saved')
            })
            .catch(() => {
                alert('Cannot Save')
            })
        }, 1000)
        return () => clearTimeout(updateDocsData)
    }, [docsDesc])

Alors, tapez quelque chose dans l'éditeur, et il sera enregistré dans la base de données.

Capture d'écran-2022-05-08-135046

Et les données ici :

Capture d'écran-2022-05-08-135105

Si nous ajoutons quelque chose de plus, nous ajouterons les données précédentes :

Capture d'écran-2022-05-08-135224

Capture d'écran-2022-05-08-135242

Comment récupérer les données de la base de données vers l'éditeur

Maintenant, si nous revenons en arrière et cliquons sur n'importe quel document, les données seront nulles ou effacées. Nous devons donc obtenir les données de la base de données et les définir pour l'éditeur.

Nous utiliserons la fonction onSnapshot pour ce faire.

import {
    updateDoc,
    collection,
    doc,
    onSnapshot
} from 'firebase/firestore';
const getData = () => {
        
    }

    useEffect(() => {
        if(isMounted.current){
            return 
        }

        isMounted.current = true;
        getData()
    }, [])

Donc, c'est exactement comme nous l'avons fait dans le composant Docs. Nous devons spécifier les données à obtenir à l'aide du paramètre ID. Et puis nous transmettons ce document à la fonction onSnapshot pour obtenir les données dont nous avons besoin.

const getData = () => {
        const document = doc(collectionRef, params.id)
        onSnapshot(document, (docs) => {
            console.log(docs.data().docsDesc)
        })
    }

Capture d'écran-2022-05-08-140423

Définissons ce docs.data().docsDesc dans l'état docsDesc en utilisant setDocsDesc. Ainsi, si le document se charge, il y sera défini.

Ajoutez des données, puis revenez en arrière. Et si vous revenez au même composant, la description du document sera là.

Capture d'écran-2022-05-08-140723

Maintenant, dans la page d'accueil où nous voyons toutes les données, nous devons également ajouter la description, si elle existe.

 <div dangerouslySetInnerHTML={{__html: doc.docsDesc}} />

Nous utilisons dangereusement SetInnerHTML car les données sont ajoutées sous forme de balises dans React Quill. Cela facilite le rendu du formatage.

Capture d'écran-2022-05-08-141304

Vous voyez, j'ai ajouté une mise en forme comme les textes en gras et en italique .

Maintenant, nous devons faire quelques légères modifications. Dans le fichier App.js (où nous ajoutons le titre du document) ajoutons également la description, qui sera initialement vide.

const addData = () => {
        addDoc(collectionRef, {
            title: title,
            docsDesc: ''
        })
        .then(() => {
            alert('Data Added');
            handleClose()
        })
        .catch(() => {
            alert('Cannot add data')
        })
    }

Donc, si nous créons un document, nous aurons le docsDesc dans le document Firestore. Cela empêchera notre application de planter lorsque nous allons sur la page EditDocs.

Maintenant, dans la page EditDocs, ajoutons le titre du document afin qu'il apparaisse en haut. Créez un état appelé documentTitle et définissez-le.

const [documentTitle, setDocumentTitle] = useState('')

const getData = () => {
        const document = doc(collectionRef, params.id)
        onSnapshot(document, (docs) => {
            setDocumentTitle(docs.data().title)
            setDocsDesc(docs.data().docsDesc);
        })
    }

Et affichez cet état en haut :

<h1>{documentTitle}</h1>

Voici le code complet de la page EditDocs jusqu'à présent :

import React, { useEffect, useState, useRef } from 'react';
import { useParams } from 'react-router-dom';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import {
    updateDoc,
    collection,
    doc,
    onSnapshot
} from 'firebase/firestore';
export default function EditDocs({
    database
}) {
    const isMounted = useRef()
    const collectionRef = collection(database, 'docsData')
    let params = useParams();
    const [documentTitle, setDocumentTitle] = useState('')
    const [docsDesc, setDocsDesc] = useState('');
    const getQuillData = (value) => {
        setDocsDesc(value)
    }
    useEffect(() => {
        const updateDocsData = setTimeout(() => {
            const document = doc(collectionRef, params.id)
            updateDoc(document, {
                docsDesc: docsDesc
            })
                .then(() => {
                    alert('Saved')
                })
                .catch(() => {
                    alert('Cannot Save')
                })
        }, 1000)
        return () => clearTimeout(updateDocsData)
    }, [docsDesc])

    const getData = () => {
        const document = doc(collectionRef, params.id)
        onSnapshot(document, (docs) => {
            setDocumentTitle(docs.data().title)
            setDocsDesc(docs.data().docsDesc);
        })
    }

    useEffect(() => {
        if (isMounted.current) {
            return
        }

        isMounted.current = true;
        getData()
    }, [])
    return (
        <div>
            <h1>{documentTitle}</h1>

            <ReactQuill
                value={docsDesc}
                onChange={getQuillData}
            />
        </div>
    )
}

Comment ajouter du style

Ajoutons maintenant un peu de style dans cette page EditDocs :

<div className='editDocs-main'>
            <h1>{documentTitle}</h1>
            <div className='editDocs-inner'>
                <ReactQuill
                    className='react-quill'
                    value={docsDesc}
                    onChange={getQuillData}
                />
            </div>
        </div>

Et dans le CSS, ajoutez le style suivant :


.editDocs-main {
    font-family: 'Poppins', sans-serif;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.editDocs-inner {
    width: 800px;
    box-shadow: 0px -2px 5px 2px rgba(181, 181, 181, 0.75);
    -webkit-box-shadow: 0px -2px 5px 2px rgba(181, 181, 181, 0.75);
    -moz-box-shadow: 0px -2px 5px 2px rgba(181, 181, 181, 0.75);
    padding: 20px;
    height: 750px;
}

.ql-container.ql-snow {
    border: none !important;
}

Nous ajoutons une ombre de boîte, nous supprimons la bordure React Quill et nous centrons le tout.

Voici à quoi ressemble notre page de modification de document :

Capture d'écran-2022-05-08-144341

Maintenant, pour notre dernière chose : remplaçons nos alertes par des messages toast. Nous avons besoin d'un autre package appelé React Toastify . Alors, installons-le.

npm i react-toastify

Ensuite, nous devons importer ces deux éléments :

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Et puis, le composant <ToastContainer /> .

Maintenant, pour le message toast, faites simplement ceci :

useEffect(() => {
        const updateDocsData = setTimeout(() => {
            const document = doc(collectionRef, params.id)
            updateDoc(document, {
                docsDesc: docsDesc
            })
                .then(() => {
                    toast.success('Document Saved', {
                        autoClose: 2000
                    })
                })
                .catch(() => {
                    toast.error('Cannot Save Document', {
                        autoClose: 2000
                    })
                })
        }, 1000)
        return () => clearTimeout(updateDocsData)
    }, [docsDesc])

Nous avons toast.success pour les alertes de succès et toast.error pour les alertes d'erreur.

Capture d'écran-2022-05-08-145209

Conclusion

Et voilà, vous avez créé un clone de Google Docs. Vous êtes libre d'expérimenter et d'améliorer cela.

Link: https://www.freecodecamp.org/news/build-a-google-docs-clone-with-react-and-firebase/

Github: https://github.com/nishant-666/Google-Docs-Clone

#firebase #react #materialui 

Comment Créer Un Clone Google Docs Avec React, Material UI Et Firebase
Tanner  Smith

Tanner Smith

1650185160

How to Style Material UI Component with TailwindCSS in React Project

How to style Material UI component with Tailwindcss in React project.

In this video I am going to show you how to style Material UI component with Tailwindcss in React project.

Code: https://github.com/Chensokheng/tailwind-with-mui/tree/final

#materialui #tailwindcss #react 

How to Style Material UI Component with TailwindCSS in React Project

Learn How to Export table to PDF in Material Table || Material UI

Export table to PDF in Material Table || Material UI.

In this video we go over:
- How to export data in pdf in material table with react
- How to write custom pdf function Material-Table 
- How to create pdf file from json using react js
- How to use jsPdf with table in react js
- How to print table data into pdf table 
and many more...

GitHub URL of program: https://github.com/vikas62081/material-table-YT/tree/pdfExport

#material #materialui #react 

Learn How to Export table to PDF in Material Table || Material UI

Learn How to Export table to Excel in Material Table || Material UI

Export table to Excel in Material Table || Material UI.

In this video we go over:
- How to export data in excel in material table with react
- How to write custom export function Material-Table 
- How to create excel file from json using react js
- How to use xlsx with table in react js
and many more...

GitHub URL of program: https://github.com/vikas62081/material-table-YT/tree/excelExport

#material #materialui #react 

Learn How to Export table to Excel in Material Table || Material UI

Learn About CRUD Operations with Json Server in Material Table

CRUD Operations with Json Server in Material Table || Material UI.

In this video we go over:
- How to perform crud operation in material table with react
- How to fetch data from back end or api using hook Material-Table 
- How to perform crud operation with json server with table in react js
- How to check json server api with postman 
- How to handle basic validation with material table
- How to mark all input fields as mandatory
and many more...

GitHub URL of program: https://github.com/vikas62081/material-table-YT/tree/crudWithJsonServer

#material #materialui #react #crud 

Learn About CRUD Operations with Json Server in Material Table