React MLSData Component
A react component to simplify the use of MLS Data from the MLSListings Odata Service within an Application.
Install
npm install --save react-mlsdata
Options
- collection - the collection you want to access example www, vow, public etc...
- resource - the resource you are trying to access examples property, agent, media etc..
- token - the authorization token from the mlslistings identity provider
- link - an odata link returned within the collection request
Media
If you are accessing an item in the media resource there is some options you can pass to optimize your request
- ListingKeyNumeric - the integer value of the media resource for the listing you want to display it must be a number example ListingKeyNumeric = {this.ListingKey} || ListingKeyNumeric = {1234456}
- MemberKeyNumeric - the integer value of the media resource for the agent you want to display it must be a number
- MediaType = defaults to Photo. You can pass thumbnail if you want a smaller image for display in a list
Geography
To access geography information
Stats
If you are accessing statistics for a particular widget (Market Trends, Key PerformanceIndicators, Year to Year), you can pass the following options to optimize your request
- collection - member, office, markettrends, KPI, year-to-year
- select - Data to be selected for stats
- filter - criteria for selection
Media Examples
Property Thumbnail
<MLSMedia MediaType="Thumbnail" ListingKeyNumeric=265403 limit="1" token=authtoken> <div> error && <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%20Not%20Found&w=150&h=150" alt="Missing Image" /> data && <div> <Values data=data /> !datavaluelength && <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%20Not%20Found&w=150&h=150" alt="Missing Image" /> datavaluelength !== 0 && <img src=datavalue0MediaURL alt="Thumbnail"/> </div> </div> </MLSMedia>
Agent Photo
<MLSMedia MediaType="Thumbnail" MemberKeyNumeric=150591 limit="1" token=authtoken> <div> error && <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%20Not%20Found&w=150&h=150" alt="Missing Image" /> data && <div> <Values data=data /> !datavaluelength && <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%20Not%20Found&w=150&h=150" alt="Missing Image" /> datavaluelength !== 0 && <img src=datavalue0MediaURL alt="Thumbnail"/> </div> </div> </MLSMedia>
MLSCount
A simplified interface for retrieving the count for any query. Simply pass the same query and filters to MLSCount component. It will in a declarative form return a count for the query which can the be used to display number of results or to build a pagination element
MLSCount Example
{ console; return <div />; } <MLSCount collection="Property" token=authtoken> <div> data && <Pagination data=data /> </div> </MLSCount>
Usage
Import
;
Basic
;; Component { console; return <div />; } Component { const listings = thisprops; var listingCollection = listings; return <ul>listingCollection</ul>; } Component { return <h3> <strong> thispropsdatalength Listings Retrieved </strong> </h3> ; } const tempToken = "your bearer token"; const App = <div> <MLSData collection="Property" token=tempToken> <div> loading && <h2>``</h2> error && <h2>errormessage</h2> data && <div> <Values data=data /> <Count data=datavalue/> <Listings listings=datavalue /> </div> </div> </MLSData> </div>; ;
Fetch Callback
You can pass functions to the onChange prop to run as the fetch is being run. Loading states, Data, Response and etc will be available to a handler function.
class App extends Component {
constructor() {
super()
this.handleResponse = this.handleResponse.bind(this)
}
handleResponse(response){
console.info("info response:", response);
}
render() {
return (
<div>
<MLSData collection="Property" token={authtoken} onChange={this.handleResponse} />
</div>
);
}
}
- See react-odata for additional options