Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stercoris/r1-io
JSX based library for building VK-Keyboards
https://github.com/stercoris/r1-io
jsx react vk
Last synced: about 2 months ago
JSON representation
JSX based library for building VK-Keyboards
- Host: GitHub
- URL: https://github.com/stercoris/r1-io
- Owner: stercoris
- License: gpl-3.0
- Created: 2021-10-25T21:30:12.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-17T20:32:38.000Z (about 2 years ago)
- Last Synced: 2024-10-11T23:23:05.493Z (2 months ago)
- Topics: jsx, react, vk
- Language: TypeScript
- Homepage:
- Size: 11.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Guide
You can see a simple project [here](https://github.com/stercoris/r1-io/tree/master/sample)
You can see a more advanced project [here](https://github.com/stercoris/vk-fi)
1. Create context of app
```typescript
enum Menus {
Main = 'main',
Settings = 'settings',
}
interface User {
name: string;
selectedMenu: Menus;
}
export interface BotContext {
user: User;
}
```
2. Create actions you will use
```typescript
const gotoMenuAction = createParametarizedAction(
'goto menu',
async (menu, {send}, {user}) => {
user.selectedMenu = menu;
await send(`Welcome to ${menu}`);
}
);
const setRandomUsername = createAction(
'set random username',
async ({send}, {user}) => {
const getRandomInt = (max: number) => Math.floor(Math.random() * max);
const randomName = ['Fish', 'Sticks', 'Kanye West', 'Toivo', 'SunBoy'];
user.name = randomName[getRandomInt(4)];
await send(`Your name is ${user.name}`);
}
);
```
3. Create menu constructors
```tsx
const SettingsMenu: R1IO.FC = async () => (
Goto main menu
);
const MainMenu: R1IO.FC = ({user}) => (
Goto settings menu
);
```
4. Create router & your context filler (middleware)
```typescript
const user: User = {
name: 'Dmitriy',
selectedMenu: Menus.Main,
};
const router = createRouter(
{
[Menus.Main]: {build: MainMenu},
[Menus.Settings]: {build: SettingsMenu},
},
({user}) => user.selectedMenu
);
export const RootMiddleware = createMiddleware(router, async () => ({user}));
```
# Install
1. Add package to your project
```bash
yarn add r1-io
```
or
```bash
npm i r1-io
```
2. Add vk-io to your project (only 4.4.0 tested)
```bash
yarn add [email protected]
```
or
```bash
npm i [email protected]
```
3. Add this lines to your `tsconfig.json`
```json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "R1IO.createElement",
"jsxFragmentFactory": "R1IO.Fragment"
}
}
```
# Features
1. React components instead of keyboard builder
```tsx
const MainMenu: R1IO.FC = ({user}) => (
Goto settings menu
);
```
2. Async react components
```tsx
const MainMenu: R1IO.FC = async ({user}) => {
await delay(2000);
;
};
```
3. User based actions