Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tsuki-lab/react-microcms-extension
Custom Hook to create extension field for microCMS
https://github.com/tsuki-lab/react-microcms-extension
microcms react-hook typescript
Last synced: 13 days ago
JSON representation
Custom Hook to create extension field for microCMS
- Host: GitHub
- URL: https://github.com/tsuki-lab/react-microcms-extension
- Owner: tsuki-lab
- License: mit
- Created: 2022-06-09T14:21:43.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-06-09T15:24:58.000Z (over 2 years ago)
- Last Synced: 2024-04-23T21:39:19.109Z (9 months ago)
- Topics: microcms, react-hook, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-microcms-extension
- Size: 23.4 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-microcms-extension
[](https://badge.fury.io/js/react-microcms-extension)
[](https://opensource.org/licenses/MIT)
This library will help you create [microCMS extension fields](https://document.microcms.io/manual/field-extension) in React.
There are two types of custom hooks offered.
- [useMicroCMSExtension](#usemicrocmsextension)
- [useMicroCMSExtensionState](#usemicrocmsextensionstate)
## Quick start
```shell
npm install react-microcms-extension
# or
yarn add react-microcms-extension
```
Use simple.
```tsx
import { useMicroCMSExtension } from 'react-microcms-extension'
function App() {
const { state, post } = useMicroCMSExtension()
return (
{
post({
description: e.target.value,
data: e.target.value,
})
}}
/>
)
}
```
# useMicroCMSExtension
## Usage
```tsx
import { useMicroCMSExtension } from 'react-microcms-extension'
function App() {
const { state, post } = useMicroCMSExtension()
return (
{
post({
description: e.target.value,
data: e.target.value,
})
}}
/>
)
}
```
## Description
```ts
type State = {
// ...
}
const options = {
height: 500,
origin: 'https://example.microcms.microcms.io',
}
const { state, post, postState } = useMicroCMSExtension(options)
```
### state
The state at the time of initialization can be handled.
### post
POST data to microCMS. Calls `window.parent.postMessage` internally.
Please refer to the [microCMS documentation](https://document.microcms.io/manual/iframe-field#h7f543cc470) for the parameters that can be posted.
### postState
The state of the result of executing the post() method.
It will contain information of action type `MICROCMS_POST_DATA_SUCCESS` or `MICROCMS_POST_DATA_FAILURE`.
## Options
| Key | Type | Default | Description |
| ------ | ---------------- | ------------------- | ---------------------------------------------------------------------- |
| height | string \| number | 300 | height of the extended field |
| width | string \| number | '100%' | width of the extended field |
| origin | string | MessageEvent.origin | microCMS admin screen URL (https://\.microcms.microcms.io) |
# useMicroCMSExtensionState
A custom hook that wraps `useMicroCMSExtension` so that it can be treated like `useState`.
## Usage
```tsx
import { useMicroCMSExtensionState } from 'react-microcms-extension'
function App() {
const [state, setState] = useMicroCMSExtensionState('')
return (
setState(e.target.value)}
/>
)
}
```
## Description
```ts
type State = {
// ...
}
const initialState: State = {
// ...
}
const options = {
height: 500,
origin: 'https://example.microcms.microcms.io',
}
const [state, setState] = useMicroCMSExtensionState(
initialState,
options
)
```
## Options
Inherits `useMicroCMSExtension` options.
### parsePostMessageParams
parse MessageParams when postEvent to microCMS
#### example
```ts
type State = {
id: string
text: string
}
const initialState: State = {
id: '',
text: ''
}
const [state, setState] = useMicroCMSExtensionState(initialState, {
parsePostMessageParams: (data) => ({
id: data.id
description: data.text,
data
}),
})
```