generated from xyflow/vite-react-flow-template
-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from gumloop/read-me
Read me
- Loading branch information
Showing
2 changed files
with
13 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,54 +1,31 @@ | ||
![](https://github.com/xyflow/web/blob/main/assets/codesandbox-header-ts.png?raw=true) | ||
![UI Preview](public/images/ui_preview.png) | ||
|
||
# React Flow starter (Vite + TS) | ||
# Gumloop Coding Challenge | ||
|
||
We've put together this template to serve as a starting point for folks | ||
interested in React Flow. You can use this both as a base for your own React | ||
Flow applications, or for small experiments or bug reports. | ||
👋 | ||
|
||
**TypeScript not your thing?** We also have a vanilla JavaScript starter template, | ||
just for you! | ||
This is an open-ended challenge. The general goal is to make the flow do something useful when you click the 'Run Flow' button. It's totally up to you how simple or complex you want to make it. | ||
|
||
## Getting up and running | ||
Feel free to set things up however you want. Honestly feel free to not even use this repo and start from scratch if you'd like. | ||
|
||
You can get this template without forking/cloning the repo using `degit`: | ||
Also check out [react flow here](https://reactflow.dev/), it's an awesome project. | ||
|
||
```bash | ||
npx degit xyflow/vite-react-flow-template your-app-name | ||
``` | ||
## Getting Started | ||
|
||
1. Clone this repository | ||
|
||
The template contains mostly the minimum dependencies to get up and running, but | ||
also includes eslint and some additional rules to help you write React code that | ||
is less likely to run into issues: | ||
2. Install dependencies: | ||
|
||
```bash | ||
npm install # or `pnpm install` or `yarn install` | ||
``` | ||
|
||
Vite is a great development server and build tool that we recommend our users to | ||
use. You can start a development server with: | ||
3. Start the development server: | ||
|
||
```bash | ||
npm run dev | ||
``` | ||
|
||
While the development server is running, changes you make to the code will be | ||
automatically reflected in the browser! | ||
|
||
## Things to try: | ||
|
||
- Create a new custom node inside `src/nodes/` (don't forget to export it from `src/nodes/index.ts`). | ||
- Change how things look by [overriding some of the built-in classes](https://reactflow.dev/learn/customization/theming#overriding-built-in-classes). | ||
- Add a layouting library to [position your nodes automatically](https://reactflow.dev/learn/layouting/layouting) | ||
|
||
## Resources | ||
|
||
Links: | ||
|
||
- [React Flow - Docs](https://reactflow.dev) | ||
- [React Flow - Discord](https://discord.com/invite/Bqt6xrs) | ||
|
||
Learn: | ||
## Submission | ||
|
||
- [React Flow – Custom Nodes](https://reactflow.dev/learn/customization/custom-nodes) | ||
- [React Flow – Layouting](https://reactflow.dev/learn/layouting/layouting) | ||
Include a link to your repo in your submission or give https://github.com/rbehal access. Email us at [email protected] if you have any issues. |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.