gcanti / Prop Types Ts
Licence: mit
Alternative syntax for prop types providing both static and runtime type safety, powered by io-ts
Stars: โญ 167
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Prop Types Ts
Class Transformer Validator
A simple plugin for class-transformer and class-validator which combines them in a nice and programmer-friendly API.
Stars: โญ 151 (-9.58%)
Mutual labels: validation
Kotlin Openapi Spring Functional Template
๐ Kotlin Spring 5 Webflux functional application with api request validation and interactive api doc
Stars: โญ 159 (-4.79%)
Mutual labels: validation
Property Validator
โ
Easy property validation for JavaScript, Node and Express.
Stars: โญ 153 (-8.38%)
Mutual labels: validation
Valdr
A model centric approach to AngularJS form validation
Stars: โญ 158 (-5.39%)
Mutual labels: validation
Slim Validation
A validation library for the Slim Framework. It internally uses Respect/Validation.
Stars: โญ 150 (-10.18%)
Mutual labels: validation
Openapi Psr7 Validator
It validates PSR-7 messages (HTTP request/response) against OpenAPI specifications
Stars: โญ 168 (+0.6%)
Mutual labels: validation
Expand
DevExpress XAF extension framework. ๐น๐ถ๐ป๐ธ๐ฒ๐ฑ๐ถ๐ป.๐ฒ๐
๐ฝ๐ฎ๐ป๐ฑ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐๐ผ๐ฟ๐ธ.๐ฐ๐ผ๐บ, ๐๐ผ๐๐๐๐ฏ๐ฒ.๐ฒ๐
๐ฝ๐ฎ๐ป๐ฑ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐๐ผ๐ฟ๐ธ.๐ฐ๐ผ๐บ and ๐๐๐ถ๐๐๐ฒ๐ฟ @๐ฒ๐
๐ฝ๐ฎ๐ป๐ฑ๐ณ๐ฟ๐ฎ๐บ๐ฒ๐๐ผ๐ฟ๐ธ and or simply ๐ฆ๐๐ฎ๐ฟ/๐๐ฎ๐๐ฐ๐ต this repository and get notified from ๐๐ถ๐๐๐๐ฏ
Stars: โญ 158 (-5.39%)
Mutual labels: validation
Formhelper
ASP.NET Core - Transform server-side validations to client-side without writing any javascript code. (Compatible with Fluent Validation)
Stars: โญ 155 (-7.19%)
Mutual labels: validation
Validation Composite
Allows uniting of several validation rules into single one for easy re-usage
Stars: โญ 159 (-4.79%)
Mutual labels: validation
Neoform
โ
React form state management and validation
Stars: โญ 162 (-2.99%)
Mutual labels: validation
Deal
Design by contract for Python with static checker and tests' generation.
Stars: โญ 164 (-1.8%)
Mutual labels: validation
Email Verifier
โ
A Go library for email verification without sending any emails.
Stars: โญ 162 (-2.99%)
Mutual labels: validation
Ozzo Validation
An idiomatic Go (golang) validation package. Supports configurable and extensible validation rules (validators) using normal language constructs instead of error-prone struct tags.
Stars: โญ 2,471 (+1379.64%)
Mutual labels: validation
Liform React
Generate forms from JSON Schema to use with React (& redux-form)
Stars: โญ 167 (+0%)
Mutual labels: validation
Canarinho
Utilitรกrios Android para padrรตes Brasileiros
Stars: โญ 162 (-2.99%)
Mutual labels: validation
Alternative syntax for prop types powered by io-ts
How it works
The @props
decorator sets propTypes
on the target component to use a
custom validator function built around
io-ts
types.
Usage
import * as React from 'react'
import * as t from 'io-ts'
import { props } from 'prop-types-ts'
// define the runtime types
const AlertType = t.keyof(
{
success: true,
warning: true,
info: true
},
'AlertType'
)
const RuntimeProps = t.interface(
{
type: AlertType
},
'Props'
)
// extract the static type
export type Props = t.TypeOf<typeof RuntimeProps>
// same as type Props = { type: 'success' | 'warning' | 'info' }
@props(RuntimeProps)
export default class Alert extends React.Component<Props, void> {
render() {
return <div>{this.props.children}</div>
}
}
Without decorators
import { getPropTypes } from 'prop-types-ts'
...
export default class Alert extends React.Component<Props, void> {
static propTypes = getPropTypes(RuntimeProps)
render() {
return <div>{this.props.children}</div>
}
}
Errors on console
<Alert type="foo" /> // => Invalid value "foo" supplied to : Props/type: AlertType
<Alert type="info" foo="bar" /> // => Invalid additional prop(s): ["foo"]
Excess Property Checks
By default prop-types-ts
performs excess property checks. You can opt-out passing an option
argument to props
@props(RuntimeProps, { strict: false })
export default class Alert extends React.Component<Props, void> {
...
}
Pre-defined types
prop-types-ts
exports some useful pre-defined types:
ReactElement
ReactChild
ReactFragment
ReactNode
children
Type checking Use the children
option
@props(RuntimeProps, { children: t.string })
export default class Alert extends React.Component<Props, void> {
...
}
<Alert type="info">{1}</Alert> // => Invalid value 1 supplied to children: string
<Alert type="info">hello</Alert> // no errors
You can use any io-ts type
import { props, ReactChild } from 'prop-types-ts'
@props(RuntimeProps, { children: t.tuple([t.string, ReactChild]) })
export default class Alert extends React.Component<Props, void> {
...
}
<Alert type="info">hello</Alert> // => Invalid value "hello" supplied to children: [string, ReactChild]
<Alert type="info">hello <b>world</b></Alert> // no errors
works for Component
s too
import * as t from 'io-ts'
import { props, ReactElement } from 'prop-types-ts'
const JSXButton = t.refinement(ReactElement, e => e.type === 'button', 'JSXButton')
@props(RuntimeProps, { children: JSXButton })
export default class Alert extends React.Component<Props, void> {
...
}
<Alert type="info">hello</Alert> // => Invalid value "hello" supplied to children: JSXButton
<Alert type="info"><button>Click me</button></Alert> // no errors
TypeScript compatibility
prop-type-ts version |
required typescript version |
---|---|
0.7.x+ | 3.5+ |
0.6.x+ | 3.2+ |
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].