https://github.com/hipstersmoothie/codelift-test
https://github.com/hipstersmoothie/codelift-test
Last synced: 24 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/hipstersmoothie/codelift-test
- Owner: hipstersmoothie
- Created: 2020-03-08T05:35:50.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T23:04:52.000Z (over 2 years ago)
- Last Synced: 2025-02-14T07:26:02.679Z (3 months ago)
- Language: TypeScript
- Size: 22 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# code_lift_  
> A "No Code" GUI for your existing React app.
> – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)
## Getting Started
Within your project:
1. `yarn add codelift --dev`
1. For [create-react-app][cra]:
`yarn codelift start`
For [Next.js][next]:
`yarn codelift dev`
_(`codelift` runs `yarn ____` with whatever you provide)_
1. Add the following `import "codelift/register"` to the top of your `src/index.tsx` or `pages/_app.tsx`:
```js
import React from "react";
import ReactDOM from "react-dom";
import { register } from "codelift";
register({ React, ReactDOM });
```
_`codelift` requires access to your application's copy of `react` and `react-dom` to support custom inspectors._
## Examples
- [Create React App + Tailwind CSS](/examples/cra)
- [Next.js + Tailwind CSS](examples/next)
## Features
- Double-Click componetns & elements in the tree view to open in VS Code.
- [Tailwind](https://tailwindcss.com/) Visual Inspector
1. Hover & Select an element.
1. **Find-as-you-type** CSS classes.
1. **Hover to preview** before applying.
1. **Click to toggle** in your source code.
- CMD+' to toggle _codelift_ and browse normally.
- Custom Inspectors:
Suppose you have [`Header` component](examples/next/components/Header.tsx) that accepts a `title`:
```js
export const Header = ({ title }) => {
...
}
```
Next, attach a custom `Inspector` component to your `Header` that accepts the current `props` and calls `setProps` when it changes:
```js
Header.Inspector = ({ props, setProps }) => {
return (
setProps({ title: event.target.value })}
defaultValue={props.title}
/>
);
};
```
Your `Inspector` will be rendered in a sidepanel when a `Header` is selected:
> 
* [What feature would you like to see?](https://github.com/ericclemmons/codelift/issues/new)
## Contributing
1. Clone this repo.
1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.
## Author
- Eric Clemmons
[cra]: https://github.com/facebook/create-react-app
[next]: https://github.com/zeit/next.js/
[tailwind]: https://tailwindcss.com/
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
