vibebees-dynamic-login

vibebees-dynamic-login provides functional login and signup UI component for React App. It has ibbuilt validator for input validation.

Installation

Install vibebees-dynamic-login with npm

  npm install vibebees-dynamic-login

Install vibebees-dynamic-login with yarn

  yarn add vibebees-dynamic-login

Props

| Props | Default | | --------------- | ------- | | Inputfield | [ ] | | type | null | | SuccessResponse | null | | ErrorResponse | null |

Inputfield

Inputfield is must require props which define different properties of input feilds.

  const Inputfield = [
  {
    name: "username",
    placeholder: "Username",
    type: "text",
    character: 4,
    require: true,
  },
  {
    name: "email",
    placeholder: "Email",
    type: "text",
    require: true,
  },
  {
    name: "password",
    placeholder: "Password",
    type: "password",
    character: 8,
    require: true,
  },
];

name

name is one of the key of an object which define name of input feilds.

  name:"username"

placeholder

placeholder is one of the key of an object which define placeholder of input feilds.

  placeholder:"username"

type

type is one of the key of an object which define type of input feilds.

  type:"text"

require

require is one of the key of an object which define either the input feilds is require or not.

  require: true

character

character is one of the key of an object which define number of require character of input feilds.

  character: 4

type

type is props which define either the component is login or signup.

  type="register"

SuccessResponse

SuccessResponse is a function which define all the activities done after successfull api call.

  SuccessResponse={SuccessResponse}

ErrorResponse

ErrorResponse is a function which handle error after bad request.

  ErrorResponse={ErrorResponse}

Example

import "./App.css";
import React from "react";
import Login from "vibebees-dynamic-login/dist/components/Login";

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  HttpLink,
  from,
} from "@apollo/client";
import { onError } from "@apollo/client/link/error";

const errorLink = onError(({ graphqlErrors, networkError }) => {
  if (graphqlErrors) {
    graphqlErrors.map(({ message, location, path }) => {
      alert(`Graphql error ${message}`);
      return null;
    });
  }
});

const link = from([
  errorLink,
  new HttpLink({ uri: "https://api.spacex.land/graphql/" }),
]);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: link,
});

const Inputfield = [
  {
    name: "username",
    placeholder: "Username",
    type: "text",
    character: 4,
    require: true,
  },
  {
    name: "email",
    placeholder: "Email",
    type: "text",
    require: true,
  },
  {
    name: "password",
    placeholder: "Password",
    type: "password",
    character: 8,
    require: true,
  },
];

function App() {
  const SuccessResponse = (res) => {
    window.location.href = "/home";
  };
  const ErrorResponse = (err) => {
    window.location.href = "/home";
  };

  return (
    <ApolloProvider client={client}>
      <div className="App ">
        <Login
          Inputfield={Inputfield}
          path={"https://warm-badlands-28984.herokuapp.com/api/user/register"}
          type="register"
          SuccessResponse={SuccessResponse}
          ErrorResponse={ErrorResponse}
        />
      </div>
    </ApolloProvider>
  );
}

export default App;

Authors

• @NabinKharel