https://github.com/thinkmill/magical-types
🔮 Document React components and other stuff typed with TypeScript magically
https://github.com/thinkmill/magical-types
Last synced: 4 months ago
JSON representation
🔮 Document React components and other stuff typed with TypeScript magically
- Host: GitHub
- URL: https://github.com/thinkmill/magical-types
- Owner: Thinkmill
- Created: 2019-07-07T01:55:50.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-03-04T04:17:22.000Z (almost 3 years ago)
- Last Synced: 2025-10-01T06:38:03.848Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 4.6 MB
- Stars: 77
- Watchers: 20
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔮 magical-types
> Document React components and other stuff typed with TypeScript _magically_
## Getting Started
### Installing babel-plugin-macros
magical-types is used as a [Babel Macro](https://github.com/kentcdodds/babel-plugin-macros). Unless you're using Create React App or Gatsby, you'll need to install it and add it to your Babel config.
```bash
yarn add babel-plugin-macros
```
```json
{
"plugins": ["babel-plugin-macros"]
}
```
### Installing magical-types
```bash
yarn add @magical-types/macro
```
### Using it
```tsx
import { PropTypes, FunctionTypes, RawTypes } from "@magical-types/macro";
type Props = {
someProp: string;
};
let MyComponent = (props: Props) => {
return
;
};
;
function myFunctionThatDoesCoolStuff(someArgument: { thing: true }) {}
;
type SomeObject = { someProperty: boolean };
/>;
function someFunctionThatReturnsAComponent() {
return MyComponent;
}
let AnotherComp = someFunctionThatReturnsAComponent();
;
```
## Thanks/Inspiration
This project is mostly some ideas that I've been thinking about because of some of the constraints in [react-docgen](https://github.com/reactjs/react-docgen), [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) and [extract-react-types](https://github.com/atlassian/extract-react-types) and how some problems could be removed by changing some constraints, notably the removal of having to know what is and isn't a React component.
The code for rendering types is **heavily** based off [pretty-proptypes](https://github.com/atlassian/extract-react-types/tree/master/packages/pretty-proptypes).