@slopmachine/react 0.0.2 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -0
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/package.json +1 -1
- package/src/components/SlopImage.tsx +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
# @slopmachine/react
|
|
2
|
+
|
|
3
|
+
The official React SDK for Slop Machine. This package provides React components to easily integrate Slop Machine image generation into your applications.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @slopmachine/react
|
|
9
|
+
# or
|
|
10
|
+
yarn add @slopmachine/react
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @slopmachine/react
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { SlopImage } from "@slopmachine/react";
|
|
19
|
+
|
|
20
|
+
function App() {
|
|
21
|
+
return (
|
|
22
|
+
<div style={{ width: "400px", height: "400px" }}>
|
|
23
|
+
<SlopImage
|
|
24
|
+
prompt="A cute cat drinking coffee in a {style} style"
|
|
25
|
+
aspectRatio="1:1"
|
|
26
|
+
variables={{ style: "anime" }}
|
|
27
|
+
/>
|
|
28
|
+
</div>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export default App;
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## API / Props
|
|
36
|
+
|
|
37
|
+
### `SlopImage`
|
|
38
|
+
|
|
39
|
+
The `SlopImage` component inherits from standard `React.ImgHTMLAttributes<HTMLImageElement>` (excluding `src` and `alt`) and accepts the following additional props:
|
|
40
|
+
|
|
41
|
+
| Prop | Type | Default | Description |
|
|
42
|
+
| :------------ | :----------------------- | :----------- | :------------------------------------------------------ |
|
|
43
|
+
| `prompt` | `string` | **Required** | The prompt to use for image generation. |
|
|
44
|
+
| `aspectRatio` | `string` | `"1:1"` | The aspect ratio of the image (e.g. `"16:9"`, `"1:1"`). |
|
|
45
|
+
| `variables` | `Record<string, string>` | `{}` | Variables to interpolate into the prompt. |
|
|
46
|
+
| `model` | `string` | `undefined` | The AI model to use for generation. |
|
|
47
|
+
| `baseUrl` | `string` | `undefined` | Custom base URL for the Slop Machine API. |
|
|
48
|
+
|
|
49
|
+
## License
|
|
50
|
+
|
|
51
|
+
MIT
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { SlopImageOptions } from '@slopmachine/core';
|
|
3
3
|
|
|
4
|
-
interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">,
|
|
4
|
+
interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">, SlopImageOptions {
|
|
5
5
|
}
|
|
6
6
|
declare const SlopImage: React.FC<SlopImageProps>;
|
|
7
7
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { SlopImageOptions } from '@slopmachine/core';
|
|
3
3
|
|
|
4
|
-
interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">,
|
|
4
|
+
interface SlopImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">, SlopImageOptions {
|
|
5
5
|
}
|
|
6
6
|
declare const SlopImage: React.FC<SlopImageProps>;
|
|
7
7
|
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge";
|
|
|
5
5
|
import {
|
|
6
6
|
buildImageUrl,
|
|
7
7
|
interpolatePrompt,
|
|
8
|
-
type
|
|
8
|
+
type SlopImageOptions,
|
|
9
9
|
} from "@slopmachine/core";
|
|
10
10
|
|
|
11
11
|
// Utility for Tailwind classes
|
|
@@ -16,7 +16,7 @@ function cn(...inputs: ClassValue[]) {
|
|
|
16
16
|
interface SlopImageProps
|
|
17
17
|
extends
|
|
18
18
|
Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">,
|
|
19
|
-
|
|
19
|
+
SlopImageOptions {}
|
|
20
20
|
|
|
21
21
|
export const SlopImage: React.FC<SlopImageProps> = ({
|
|
22
22
|
prompt,
|