From ff37177ca6acc1281ef0399558ef9dd348466444 Mon Sep 17 00:00:00 2001
From: Michael Brown <mikeb@360replays.com>
Date: Fri, 9 Feb 2024 14:46:21 -0800
Subject: [PATCH] Update README.md

---
 README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README.md b/README.md
index 918ed95..b9b6fcf 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,14 @@ or using yarn:
 yarn add react-country-state-dropdown
 ```
 
+## Demo
+
+View the [live demo](https://codesandbox.io/p/sandbox/currying-cherry-8f9vt3?file=%2Fsrc%2FApp.js%3A42%2C18&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clse0ychi0006356h36uv4wc5%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clse0ychi0002356hpw6u1u8n%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clse0ychi0003356hdqnpctcl%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clse0ychi0005356hlq5qjjah%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clse0ychi0002356hpw6u1u8n%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clse0ychi0001356hli4p2b45%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A4%252C%2522startColumn%2522%253A25%252C%2522endLineNumber%2522%253A4%252C%2522endColumn%2522%253A25%257D%255D%257D%252C%257B%2522id%2522%253A%2522clsf596dr0002356h7450kk96%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A11%252C%2522startColumn%2522%253A43%252C%2522endLineNumber%2522%253A11%252C%2522endColumn%2522%253A43%257D%255D%252C%2522filepath%2522%253A%2522%252Fpackage.json%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clsf8c73k0002356ixpp7798v%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A42%252C%2522startColumn%2522%253A18%252C%2522endLineNumber%2522%253A42%252C%2522endColumn%2522%253A18%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clse0ychi0002356hpw6u1u8n%2522%252C%2522activeTabId%2522%253A%2522clsf8c73k0002356ixpp7798v%2522%257D%252C%2522clse0ychi0005356hlq5qjjah%2522%253A%257B%2522id%2522%253A%2522clse0ychi0005356hlq5qjjah%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clse0ychi0004356h4t59weia%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clse0ychi0004356h4t59weia%2522%257D%252C%2522clse0ychi0003356hdqnpctcl%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clse0ychi0003356hdqnpctcl%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D).
+
+## Screenshot
+
+![image](https://github.com/replaysMike/react-country-state-dropdown/assets/2531058/33b1b0ec-fc65-48f1-b4cf-7003b9a9f86b)
+
 ## Usage
 
 It's very simple to use. The state can be managed in a controlled or uncontrolled manner. Here we are showing an example of controlled usage by assigning an initial value and an onChange handler. Note that the `<StateDropdown />` requires a `country` input in order to display states for the selected country. `<CityDropdown />` requires both a `country` and a `state`, and it's generally a good idea to use the option `allowFreeFormText` to allow city entries that aren't prepopulated in the dropdown.