Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@epicinium/basis

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

2

Version

1.0.0-rc.2

License

MIT

Unpacked Size

33.5 kB

Total Files

8

Last publish

Collaborators

  • avatar