Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@daffodil/contact

Package Overview
Dependencies
Maintainers
0
Versions
198
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@daffodil/contact

`@daffodil/contact` allows you to quickly scaffold a contact form feature in an Angular application.

  • 0.79.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
30
decreased by-87.5%
Maintainers
0
Weekly downloads
 
Created
Source

@daffodil/contact

@daffodil/contact allows you to quickly scaffold a contact form feature in an Angular application.

Overview

It supports drivers for a variety of ecommerce platforms, simplifying the process of integrating your UI with your platform's contact features.

Installation

To install @daffodil/contact, use the following commands in your terminal.

Install with npm:

npm install @daffodil/contact --save

Install with yarn:

yarn add @daffodil/contact

After installing, an ecommerce platform driver needs to be set up. We highly recommend installing the in-memory web api for fast, out-of-the-box development.

Getting started

  1. Import the DaffContactModule in the root component of your application.
  2. Import StoreModule.forRoot({}). This will be relevant later on when utilizing the redux and state management features of @daffodil/contact.
@ngModule({
  imports:[
    StoreModule.forRoot({}),
    DaffContactModule,
  ]
})

Usage

@daffodil/contact provides a DaffContactFacade that centralizes the complexities of the library into one place. This facade handles sending your contact form to your application's backend and can also be utilized to build your UI with behaviors common to a contact form.

To inject the facade inside your component, include an instance of DaffContactFacade in your component's constructor.

export class ContactComponent {
  constructor(public contactFacade: DaffContactFacade) {}
}

Sending a contact form to your platform's backend

The DaffContactFacade is built generically, so feel free to create your own submission object that represents your app's contact form. A simple example is given below:

export interface ContactForm {
  email: string;
}

The ContactForm only contains a value of email and will represent the payload of data that is sent when a user submits their contact form.

Using the facade

Once the DaffContactFacade has been set up in your component, it can now be used to send off your contact data.

To do so, use the facade.dispatch() method to dispatch a DaffContactSubscribe<T>() action with T being the type of submission object you are using. In addition, it will also update three observable streams of success$, error$, and loading$. These can be used to enhance your application's UI.

import {
  DaffContactSubscribe,
  DaffContactSubmission,
  DaffContactFacade
} from '@daffodil/contact';

export class ContactComponent implements OnInit {
  ngOnInit() {
    success$: Observable<boolean> = this.contactFacade.success$;
    error$: Observable<string> = this.contactFacade.error$;
    loading$: Observable<boolean> = this.contactFacade.loading$;
  }

  email = 'JohnDoe@email.com';

  constructor(public contactFacade: DaffContactFacade) {}

  submitData() {
    this.contactFacade.dispatch(new DaffContactSubscribe<DaffContactSubmission>(this.email));
  }
}

In this example, three observable streams are assigned from contactFacade. Then when submitData is called, the contactFacade will call its dispatch function, which will send your data off to the backend and update the three observable streams.

FAQs

Package last updated on 04 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc