kripod / React Polymorphic Types
Licence: mit
Zero-runtime polymorphic component definitions for React
Stars: ✭ 78
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to React Polymorphic Types
system-F
Formalization of the polymorphic lambda calculus and its parametricity theorem
Stars: ✭ 20 (-74.36%)
Mutual labels: polymorphism
OOP-In-CPlusPlus
An Awesome Repository On Object Oriented Programming In C++ Language. Ideal For Computer Science Undergraduates, This Repository Holds All The Resources Created And Used By Me - Code & Theory For One To Master Object Oriented Programming. Filled With Theory Slides, Number Of Programs, Concept-Clearing Projects And Beautifully Explained, Well Doc…
Stars: ✭ 27 (-65.38%)
Mutual labels: polymorphism
swagger-object-validator
Node-Module to validate your model against a swagger spec and receive in-depth error traces
Stars: ✭ 27 (-65.38%)
Mutual labels: polymorphism
archsat
A proof-producing SMT/McSat solver, handling polymorphic first-order logic, and using an SMT/McSat core extended using Tableaux, Superposition and Rewriting.
Stars: ✭ 20 (-74.36%)
Mutual labels: polymorphism
Scriptum
A fool's scriptum on functional programming
Stars: ✭ 346 (+343.59%)
Mutual labels: polymorphism
Java-Programs
Java Practiced Problems including concepts of OOPS, Interface, String , Collection.
Stars: ✭ 51 (-34.62%)
Mutual labels: polymorphism
Zipperposition
An automatic theorem prover in OCaml for typed higher-order logic with equality and datatypes, based on superposition+rewriting; and Logtk, a supporting library for manipulating terms, formulas, clauses, etc.
Stars: ✭ 46 (-41.03%)
Mutual labels: polymorphism
Whitecomet-Research
Research on malware creation and protection
Stars: ✭ 62 (-20.51%)
Mutual labels: polymorphism
vanilla-lang
An implementation of a predicative polymorphic language with bidirectional type inference and algebraic data types
Stars: ✭ 73 (-6.41%)
Mutual labels: polymorphism
Arrow
Λrrow - Functional companion to Kotlin's Standard Library
Stars: ✭ 4,771 (+6016.67%)
Mutual labels: polymorphism
ftor
ftor enables ML-like type-directed, functional programming with Javascript including reasonable debugging.
Stars: ✭ 44 (-43.59%)
Mutual labels: polymorphism
GeneticVariation.jl
Datastructures and algorithms for working with genetic variation
Stars: ✭ 33 (-57.69%)
Mutual labels: polymorphism
Laravel Ownership
Laravel Ownership simplify management of Eloquent model's owner.
Stars: ✭ 71 (-8.97%)
Mutual labels: polymorphism
Zion
A statically-typed strictly-evaluated garbage-collected readable programming language.
Stars: ✭ 33 (-57.69%)
Mutual labels: polymorphism
react-polymorphic-types
Zero-runtime polymorphic component definitions for React
Motivation
Being a successor to react-polymorphic-box, this project offers more accurate typings with less overhead.
Features
- Automatic code completion, based on the value of the
as
prop - Static type checking against the associated component’s inferred props
- HTML element name validation
Usage
A Heading
component can demonstrate the effectiveness of polymorphism:
<Heading color="rebeccapurple">Heading</Heading>
<Heading as="h3">Subheading</Heading>
Custom components like the previous one may utilize the package as shown below.
import type { PolymorphicPropsWithoutRef } from "react-polymorphic-types";
// An HTML tag or a different React component can be rendered by default
export const HeadingDefaultElement = "h2";
// Component-specific props should be specified separately
export type HeadingOwnProps = {
color?: string;
};
// Extend own props with others inherited from the underlying element type
// Own props take precedence over the inherited ones
export type HeadingProps<
T extends React.ElementType = typeof HeadingDefaultElement
> = PolymorphicPropsWithoutRef<HeadingOwnProps, T>;
export function Heading<
T extends React.ElementType = typeof HeadingDefaultElement
>({ as, color, style, ...restProps }: HeadingProps<T>) {
const Element: React.ElementType = as || HeadingDefaultElement;
return <Element style={{ color, ...style }} {...restProps} />;
}
⚠️ All the additional typings below will be deprecated as soon as microsoft/TypeScript#30134 is resolved.
React.forwardRef
With import * as React from "react";
import type {
PolymorphicForwardRefExoticComponent,
PolymorphicPropsWithoutRef,
PolymorphicPropsWithRef
} from "react-polymorphic-types";
import { HeadingDefaultElement, HeadingOwnProps } from "./Heading";
export type HeadingProps<
T extends React.ElementType = typeof HeadingDefaultElement
> = PolymorphicPropsWithRef<HeadingOwnProps, T>;
export const Heading: PolymorphicForwardRefExoticComponent<
HeadingOwnProps,
typeof HeadingDefaultElement
> = React.forwardRef(function Heading<
T extends React.ElementType = typeof HeadingDefaultElement
>(
{
as,
color,
style,
...restProps
}: PolymorphicPropsWithoutRef<HeadingOwnProps, T>,
ref: React.ForwardedRef<React.ElementRef<T>>
) {
const Element: React.ElementType = as || HeadingDefaultElement;
return <Element ref={ref} style={{ color, ...style }} {...restProps} />;
});
React.memo
With import * as React from "react";
import type { PolymorphicMemoExoticComponent } from "react-polymorphic-types";
import { Heading, HeadingDefaultElement, HeadingOwnProps } from "./Heading";
export const MemoizedHeading: PolymorphicMemoExoticComponent<
HeadingOwnProps,
typeof HeadingDefaultElement
> = React.memo(Heading);
React.lazy
With import * as React from "react";
import type { PolymorphicLazyExoticComponent } from "react-polymorphic-types";
import type { HeadingDefaultElement, HeadingOwnProps } from "./Heading";
export const LazyHeading: PolymorphicLazyExoticComponent<
HeadingOwnProps,
typeof HeadingDefaultElement
> = React.lazy(async () => {
const { Heading } = await import("./Heading");
return { default: Heading };
});
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].