A react component for listing and selecting wordpress posts using wp-api
SelectPostsDropdown is a React component to render a dropdown that will be populated with the posts, of the type specificed, and allows the user to search through items. This components takes care of updating the state of the dropdown menu and uses render props to fetch and then load the posts listed by title.
yarn install select-posts-dropdown
import SelectPostsDropdown from 'select-posts-dropdown';
const PostDropdown = () => (
<SelectPostsDropdown
onChange={ ( { id, title } ) => {
console.log( 'post selected', { id, title } )
} }
/>
);
The component accepts the following props. Props not included in this set will be applied to the element wrapping Popover content.
className of the outermost container
- Type:
String
- Required: No
A callback invoked when a selection is made on the dropdown menu.
- Type:
Function
- Required: Yes
The first argument of the callback is an object containing the following properties:
-
title
: The title of the post -
id
: The ID of the post
The values to load on initial render. These options will be replaced when the api call returns with data.
- Type:
Array
- Required: No
The text to place into the dropdown on it's initial state when no selection is active
- Type:
String
- Required: No
If Boolean
:: true, whenever a request is made from the wp-api the resulting posts are saving in a window object window.wpData.[postType]
If string
:: !empty, resulting posts data is saved to the window under this name (eg: data
== window.data)
- Type:
Boolean
orstring
- Required: No
- Default:
true
The value to set the dropdown to after render.
- Type:
String
- Required: No
Some text to place above the dropdown, if left empty no text will appear.
- Type:
string
- Required: No
Limit to only this number of selected posts
- Type:
number
- Required: No
GPL3 © Ken Eucker.
This project is inspired by the hard work of everyone at Auttomatic and their dedication to open source software.