@epicinium/basis
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-rc.2 • Public • Published

    @epicinium/basis

    Make a component that has the pre-defined shared extension and interoperability of both prop-types and TypeScript.

    Build StatusTest coverageLicensePackage Version

    Table of Contents

    Installation

    $ npx install-peerdeps @epicinium/basis
    $ npm install --save @epicinium/basis

    Usage

    Integration of prop-types and TypeScript

    // React modules.
    import React from 'react';
    import PropTypes from 'prop-types';
    
    // This module.
    import BaseComponent from '@epicinium/basis';
    
    export default class Animal extends BaseComponent({
    	species: PropTypes.string.isRequired,
    	isLive: [PropTypes.bool, true]
    }) {
    	/**
    	 * Below two static properties will be
    	 * mapped by super constructor.
    	 *
    	 * static propTypes = ✨;
    	 * static defaultProps = ✨;
    	 */
    
    	render() {
    		const { species, isLive } = this.props;
    
    		return <span>{`${isLive ? 'Living' : 'Dead'} ${species}`}</span>;
    	}
    }

    Subscriptions for multiple contexts

    // React modules.
    import React, { Context, createContext } from 'react';
    import PropTypes from 'prop-types';
    
    // This module.
    import BaseComponent from '@epicinium/basis';
    
    // Type definitions.
    type Subspecies = string;
    type Gender = 'Unknown' | 'Male' | 'Female';
    
    // Contexts.
    const SubspeciesContext: Context<Subspecies> = createContext('incognita');
    const GenderContext: Context<Gender> = createContext('Unknown');
    
    export default class Animal extends BaseComponent({
    	species: PropTypes.string.isRequired,
    	isLive: [PropTypes.bool, true]
    }) {
    	static subscriptions = [SubspeciesContext, GenderContext];
    
    	render(subspecies: Subspecies, gender: Gender) {
    		const { species, isLive } = this.props;
    
    		return <span>{`${isLive ? 'Living' : 'Dead'} ${species} ${subspecies} (${gender})`}</span>;
    	}
    }

    updateState method instead of setState method

    // React modules.
    import React from 'react';
    import PropTypes from 'prop-types';
    
    // This module.
    import BaseComponent from '@epicinium/basis';
    
    // Type definitions.
    type FluidControllerState = {
    	isFlow: boolean;
    };
    
    export default class FluidController extends BaseComponent<FluidControllerState>({
    	type: PropTypes.string.isRequired
    }) {
    	state = {
    		isFlow: false
    	};
    
    	handleButtonClick = async () => {
    		await this.updateState({ isFlow: !this.state.isFlow });
    	};
    
    	render() {
    		const {
    			props: { type },
    			state: { isFlow }
    		} = this;
    
    		return (
    			<>
    				<button onClick={this.handleButtonClick}>On/Off</button>
    				<hr />
    				<span>{`${type} ${isFlow ? 'Flowing' : 'Stopped'}`}</span>
    			</>
    		);
    	}
    }

    Contributing

    Requisites

    Trivia

    basis means base in the Latin Language

    License

    MIT Licensed.

    Keywords

    none

    Install

    npm i @epicinium/basis

    DownloadsWeekly Downloads

    8

    Version

    1.0.0-rc.2

    License

    MIT

    Unpacked Size

    33.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • cichol