open-index/open-npm huggingface dataset:
npm package: @ossy/cms-client-react
Description: React bindings for cms rest api
Author: Ossy
Latest version: 0.0.83

# React bindings

To make it as easy as possible to use our cms we have created a library
with react hooks you can use to fetch data.

## Getting started

To use these hooks install the package **@ossy/cms-client-react**

```
npm install @ossy/cms-client-react
```

Then we simply need to wrap our app in a <WorkspaceProvider /> that will
handle data storage and configuration for us.
You will need the workspaceId for the workspace you want to fetch data from.
The workspaceId can be found in the list of workspaces you have access to or
in the url when you view the resources in the UI.

```
// App.jsx
import { WorkspaceProvider } from '@ossy/cms-client-react'
import { MyComponent } from './MyComponent.jsx'

export const App = () => (
  <WorkspaceProvider workspaceId="your-workspace-id">
    <MyComponent />
  </WorkspaceProvider>
)
```
```
// MyComponent.jsx
import { useResources } from '@ossy/cms-client-react'

export const MyComponent = () => {
  const { status, resources } = useResources('/folder/path/in/cms')

  return (
    <>
      { status === 'Error' && (
        <>Something went wrong</>
      )}

      { status === 'Loading' && (
        <>Loading...</>
      )}

      { status === 'Success' && (
        resources.map(resource => (
          <div key={resource.id}>
            {resource.name}
          </div>
        ))
      )}
    </>  
  )
}
```

## Reference

### useResources

```
const { status, resources } = useResources('/')
```

**Parameters**

- **path** - Folder path in the cms UI

**Returns**

Returns an object containing

- **status** - String value that indicates loading status.
  Can be used to show loading indicators or error screens.
  Possible values are: NotInitialized, Loading, Success, Error
- **resources** - Array of resources, defaults to an empty array when
  loading is not Success

### useResource

```
const { status, resource } = useResource('resourceId')
```

**Parameters**

- **resourceId** - Id of the resource you want to fetch

**Returns**

Returns an object containing

- **status** - String value that indicates loading status.
  Can be used to show loading indicators or error screens.
  Possible values are: NotInitialized, Loading, Success, Error
- **resource** - The fetched resource, defaults to an empty object
  when status is not Success
npm package: @ossy/connected-components
Description: Ossy's CMS Connected React component library
Author: Ossy
Latest version: 1.9.0

# @ossy/connected-components

CMS-connected React components for the Ossy Ecosystem. The `App` component provides routing, theming, workspace context, and SDK integration in a single wrapper.

## Installation

```bash
npm install @ossy/connected-components @ossy/design-system @ossy/themes @ossy/router-react @ossy/sdk @ossy/sdk-react
```

## When to use

- **@ossy/cli** — Fastest path: run `npx @ossy/cli dev` with `src/*.page.jsx` and `src/config.js`
- **@ossy/connected-components** — Custom setups (Next.js, Vite, Remix): use the `App` component with your own bundler and server

## Quick start

```jsx
import { App } from '@ossy/connected-components'
import { CloudLight } from '@ossy/themes'

export default () => (
  <App
    workspaceId="your-workspace-id"
    theme={CloudLight}
    pages={[
      { id: 'home', path: '/', element: <HomePage /> },
      { id: 'about', path: '/about', element: <AboutPage /> },
    ]}
  />
)
```

## Configuration

| Prop | Description |
|------|-------------|
| `workspaceId` | Your workspace identifier |
| `theme` | Theme object (e.g. `CloudLight`, `CloudDark`) |
| `themes` | Multiple themes for switching via `useTheme` |
| `pages` | Array of `{ id, path, element }` page configs |
| `apiUrl` | Optional API base URL |
| `devMode` | Enables theme editor when `true` |

## Documentation

See **App — Getting Started** in Storybook for detailed setup with `@ossy/cli` and custom bundlers:

```bash
npm start
```

## Peer dependencies

- `react` >=19.0.0
- `@ossy/design-system` >=0.5.0
- `@ossy/pages` >=0.5.0
- `@ossy/router` >=0.5.0
- `@ossy/router-react` >=0.5.0
- `@ossy/sdk` >=0.5.0
- `@ossy/sdk-react` >=0.5.0
- `@ossy/themes` >=0.5.0

## License

MIT