FamilySearch web components is a library of Polymer elements that use the FamilySearch API to display data from the FamilySearch Family Tree.
Try out the sample app to see the components in action.
The web components are in a beta state. The concept has been proven and the architecture is sound but they need a bit a polishing. Styles need to be standardized and an error handling strategy needs to developed. Those two and other outstanding issues are listed in the fs-elements issue tracker.
The demos don't work well on the webcomponents.org catalog because the redirect URI for OAuth is difficult to handle. We published our own version of docs and demos at https://fs-webcomponents.github.io/indie-catalog/.
It is expected that you already know how to use Polymer. If not, please review their tutorials.
First you need to configure the SDK client with an <fs-client> element. Without
it the components can't load any data from the API.
<fs-client app-key="MY-APP-KEY" redirect-uri="/my/redirect/path" environment="production"></fs-client>Then add a component that display some data.
<fs-person-summary person-id="PPPP-PPP"></fs-person>We recommend adding a <fs-signin> button to the page too so that the user can
login. The components will automatically update their state after the user signs
in. In this case <fs-person-summary> will automatically load the person and
display the profile summary after the user signs in. It will also automatically
clear the data when the user signs out.
View the source code for the component demos to see how easy it is to use them.
<fs-client> is the foundation of FamilySearch web components because it manages
access to the SDK. Without it your element can't request data from the API.
We recommend setting the debounceDuplicates property to true on <fs-client>.
This allows multiple elements to request data from the same resource while only
having one HTTP request sent to the API by the SDK.
Most elements will use <fs-client> indirectly via <fs-request>.
Review the code for one of the existing elements to see how you might write your
own element that uses <fs-request> to get data from the FamilySearch API.
<fs-person-chip> is a good example of a simple component that relies on
<fs-person-mixin> to do most of it's heavy lifting. <fs-person-portrait> is
a little more complex but is used by most other components that display people.
<fs-pedigree>, <fs-person-families>, and <fs-add-person> are complex in
their processing and displaying of data.