@epicinium/basis

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

Table of Contents

• @epicinium/basis
  • Table of Contents
  • Installation
  • Usage
    • Integration of prop-types and TypeScript
    • Subscriptions for multiple contexts
    • updateState method instead of setState method
  • Contributing
    • Requisites
  • Trivia
  • License

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

• Node.js LTS Dubnium v10.15.0+

Trivia

basis means base in the Latin Language

License

MIT Licensed.