Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Translate react-desc types to typescript definitions
// Start of a utility for translating react-desc types to TypeScript definitions
import * as fp from 'lodash/fp';
const PropTypes = {
string: 'string',
func: 'Function',
oneOf: x => x.join('" | "'),
shape: x => JSON.stringify(x),
oneOfType: x => x.join(' | '),
arrayOf: x => x,
node: 'JSX.Element',
any: 'any',
bool: 'boolean'
const schema = {
description: 'A text input field with optional suggestions.',
usage: `import { TextInput } from 'grommet';
<TextInput id='item' name='item' />`,
props: {
defaultValue: [
PropTypes.string, 'What text to start with in the input.',
id: [
PropTypes.string, 'The id attribute of the input.',
name: [
PropTypes.string, 'The name attribute of the input.',
onInput: [
'Function that will be called when the user types in the input.',
onSelect: [
`Function that will be called when the user selects a suggestion.
The suggestion contains the object chosen from the supplied suggestions.`,
placeholder: [
PropTypes.string, 'Placeholder text to use when the input is empty.',
plain: [
`Whether this is a plain input with no border or padding.
Only use this when the containing context provides sufficient affordance`,
size: [
PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
'The size of the TextInput.',
suggestions: [
label: PropTypes.node,
value: PropTypes.any,
`Suggestions to show. It is recommended to avoid showing too many
suggestions and instead rely on the user to type more.`,
value: [
PropTypes.string, 'What text to put in the input.',
const parse = () => fp.compose(
fp.join('"; \n'),': "')),
fp.flatten,, => ({
[x]: fp.compose(fp.head, fp.get(`props.${x}`))(schema)
// Result:
defaultValue: "string";
id: "string";
name: "string";
onInput: "Function";
onSelect: "Function";
placeholder: "string";
plain: "boolean";
size: "small" | "medium" | "large" | "xlarge";
suggestions: "{"label":"JSX.Element","value":"any"} | string";
value: "string";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment