Displaying your data in a table might work for many use-cases. However, depending on your plugin and data it might make sense to customize the way your data is visualized. Flipper uses React to render the plugins and provides a variety of ready-to-use UI components that can be used to build custom plugin UIs.
Replacing the table
For our sea mammals app, we might not only want to see them listed as image URLs in a table but render the actual images in nice little cards. When selecting one of the cards we still want to display all details in the sidebar.
Currently, the default export in our
index.tsx is from
createTablePlugin. Now we are going to replace this with a custom React component extending
Adding data handling
The plugin is quite useless when we don't display any actual data. We are adding two static properties to our plugin class for data handling.
defaultPersistedState defines the default state before we received any data. In
persistedStateReducer we define how new data is merged with the existing data.
For the default state we define an empty object because we don't have any data, yet. When receiving data, we simply add it to the existing object, using the ID as a key. Learn more about persistedState in our guide.
Note: The method name
newRow is still the same that we defined on the native side.
Rendering the data
Now we can access the data from
this.props.persistedState.data and render it. So let's update our
render method using a custom
Card component, which we will implement in a bit.
Adding the sidebar
When clicking on a Card, we want to show all details in the sidebar as we did with the table before. We are using React's state to store the selected ID in our data. Flipper provides a
DetailSidebar component which we can use to add information to the sidebar. It doesn't matter where this component is placed as long as it is returned somewhere in our
render method. The
renderSidebar method returning the sidebar's content is still the same we used with
Creating a custom component
Card component is responsible for rendering the actual image and title. This is not very specific to Flipper, but is using plain React. Note the usage of
styled to adjust the style of existing UI components and
colors which provides a library of colors used throughout the app.