kyc

    0.1.21 • Public • Published

    KYC Logo

    KYC

    🥁 Fetch’ ing data from web services is an important and essential part of the web development. Also there’re some routines after then fetching the data!

    • looping data
    • caching
    • creating content

    KYC manages this routine in a smart way for you. Just customise KYC and enjoy the convenience.

    KYC serves you:

    • [x] Easy setup for API connection
    • [x] Easy content rendering over server response
    • [x] Caching response
    • [x] Setting expire time for cache
    • [x] API quota saving
    • [x] Bandwidth saving
    • [x] Performance improving

    Did you know? KYC works with all JS base technologies... Like React, React Native, Type Script, Angular, Ionic, Vue, etc.

    What to get?

    • Fetched and parsed output of your request

      OR

    • Array of your components which are prepared with output of your request

    What to set?

    • url (string) - The end point URL for the HTTP request. This is an only must parameter.
    • settings (Object) - Any settings from the list below. All these are optional.
    • settings.method (string) - HTTP request method type (i.e. GET, POST, ...).
    • settings.headers (Object) - HTTP request headers.
    • settings.options (Object) - HTTP request options.
    • settings.parser (string) - Promise-based methods to access the body in various formats(json, text, formData, blob or arrayBuffer ).
    • settings.log (boolean) - Log parsed response on console.
    • settings.key (string) - Key or key chain (i.e. response.data.informations).
    • settings.component (function) - Callback function. Receives array members one by one as parameter.
    • settings.target (string) - CSS selector of target element on body for inserting rendered component (i.e. body, #id, .class-name)
    • settings.timeDiff (string) - Time difference to expire data on local storage (i.e. 123, 123s, 123m, 123h, 123d, 123w, 123y).
    • settings.sameDay (boolean) - Same day control to expire data on local storage.
    • settings.totalLimit (number) - Limit total request limit count by kyc from now on. Don't set it to remove the limit.
    • settings.errorHandler (function) - Error handler function.

    How to install & import

    $: npm install kyc
    import kyc from 'kyc';

    How to use in React

    import kyc from 'kyc';
    import CustomComponent from './components/CustomComponent';
    
    let url = '';
    let headers = {};
    let key = '';
    let timeDiff = '1d';
    let component = (item) => {
        return (
            <CustomComponent 
                imgSrc = {item.background} 
                title = {item.title}
            />
        );
    }
    
    kyc(url,{ headers, key, component, timeDiff}).then(output => {
        /*output will be array of your components*/
    });

    React sample with hooks

    App.js

    import './App.css';
    import kyc from 'kyc';
    import Card from './components/Card';
    import {useState, useEffect} from 'react';
    
    function App() {
    
     const [countries, setCountries] = useState();
    
     useEffect(() => {
       let url = 'https://restcountries.eu/rest/v2/all';
       let timeDiff = '1d';
       let log = 'true';
       let component = (item) => {
         return (
           <Card 
             imgSrc = {item.flag} 
             title = {item.name}
           />
         );
       }
    
       kyc(url, {log, timeDiff, component})
       .then(output => setCountries(output));
     }, []);
    
     return (
       <div className="App">
         <h1>KYC Sample with countries</h1>
         {countries}
       </div>
     );
    }
    
    export default App;

    Card.js

    import './Card.css';
    
    export default function (props) {
     return (
       <div className = "card">
         <img src = {props.imgSrc}/>
         <h3>{props.title}</h3> 
       </div>
     );
    }

    GitHub Repo

    GitHub Pages

    React sample with classes

    🥁 Samples are coming soon...

    For sure, you can try yourself and even contribute with us!

    How to use in Angular

    🥁 Instructions are coming soon...

    For sure, you can try yourself and even contribute with us!

    Angular Sample

    🥁 Samples are coming soon...

    For sure, you can try yourself and even contribute with us!

    How to use in Vue

    🥁 Instructions are coming soon...

    For sure, you can try yourself and even contribute with us!

    Vue Sample

    🥁 Samples are coming soon...

    For sure, you can try yourself and even contribute with us!

    Install

    npm i kyc

    DownloadsWeekly Downloads

    0

    Version

    0.1.21

    License

    MIT

    Unpacked Size

    19 kB

    Total Files

    14

    Last publish

    Collaborators

    • bulentkyc