@epicinium/basis
Make a component that has the pre-defined shared extension and interoperability of both prop-types and TypeScript.
Table of Contents
Installation
$ npx install-peerdeps @epicinium/basis
$ npm install --save @epicinium/basisUsage
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