{"id":28978,"date":"2021-09-14T12:25:16","date_gmt":"2021-09-14T12:25:16","guid":{"rendered":"https:\/\/webartdevelopers.com\/blog\/?p=28978"},"modified":"2022-11-08T07:00:13","modified_gmt":"2022-11-08T07:00:13","slug":"react-chrono","status":"publish","type":"post","link":"https:\/\/webartdevelopers.com\/blog\/react-chrono\/","title":{"rendered":"REACT CHRONO"},"content":{"rendered":"\r\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Author:<\/em><\/span><\/strong><\/h4>\r\n\r\n\r\n\r\n<ul>\r\n<li>Prabhu Murthy<\/li>\r\n<li>August 14, 2020<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>Made with:<\/em><\/span><\/strong><\/h4>\r\n\r\n\r\n\r\n<ul>\r\n<li>HTML \/ CSS \/ JS<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\"><strong><span style=\"text-decoration: underline;\"><em>About the code:<\/em><\/span><\/strong><\/h4>\r\n\r\n\r\n\r\n<p>This is an amazing and cool Modern timeline component for React created using HTML, CSS and JS.<\/p>\r\n<p><em><strong>Features:<\/strong><\/em><\/p>\r\n<ul dir=\"auto\">\r\n<li><img loading=\"lazy\" decoding=\"async\" class=\"emoji\" src=\"https:\/\/webartdevelopers.com\/blog\/wp-content\/uploads\/2022\/11\/18f9f71ed5a81bd1aa6c508fb5188950.png\" alt=\"traffic_light\" width=\"20\" height=\"20\" \/>\u00a0Render timelines in three different modes (Horizontal,\u00a0Vertical,\u00a0Vertical-Alternating).<\/li>\r\n<li><img loading=\"lazy\" decoding=\"async\" class=\"emoji\" src=\"https:\/\/webartdevelopers.com\/blog\/wp-content\/uploads\/2022\/11\/4537a3b5171e5a720bba772a9c81fb5c.png\" alt=\"tv\" width=\"20\" height=\"20\" \/>\u00a0 Auto play the timeline with the\u00a0slideshow\u00a0mode.<\/li>\r\n<li><img loading=\"lazy\" decoding=\"async\" class=\"emoji\" src=\"https:\/\/webartdevelopers.com\/blog\/wp-content\/uploads\/2022\/11\/0a633c591513700e2597b8d2d8f57990.png\" alt=\"framed_picture\" width=\"20\" height=\"20\" \/>\u00a0\u00a0Display Images &amp; Videos\u00a0in the timeline with ease.<\/li>\r\n<li><img loading=\"lazy\" decoding=\"async\" class=\"emoji\" src=\"https:\/\/webartdevelopers.com\/blog\/wp-content\/uploads\/2022\/11\/c22ac8ec5d8221daef2c8488bc601838.png\" alt=\"keyboard\" width=\"20\" height=\"20\" \/>\u00a0\u00a0Keyboard accessible.<\/li>\r\n<li><img loading=\"lazy\" decoding=\"async\" class=\"emoji\" src=\"https:\/\/webartdevelopers.com\/blog\/wp-content\/uploads\/2022\/11\/624df9b521fb8f0674b6b2952b2395e4.png\" alt=\"wrench\" width=\"20\" height=\"20\" \/>\u00a0\u00a0Render\u00a0custom content easily.<\/li>\r\n<li><img loading=\"lazy\" decoding=\"async\" class=\"emoji\" src=\"https:\/\/webartdevelopers.com\/blog\/wp-content\/uploads\/2022\/11\/7640cffdc9da8b8fb0c3b8d4e2c471a6.png\" alt=\"zap\" width=\"20\" height=\"20\" \/>\u00a0 Data driven API.<\/li>\r\n<li><img loading=\"lazy\" decoding=\"async\" class=\"emoji\" src=\"https:\/\/webartdevelopers.com\/blog\/wp-content\/uploads\/2022\/11\/e3ce875299b4c625d4f4056c6f7b2840.png\" alt=\"art\" width=\"20\" height=\"20\" \/>\u00a0\u00a0Customize\u00a0colors with ease.<\/li>\r\n<li><img loading=\"lazy\" decoding=\"async\" class=\"emoji\" src=\"https:\/\/webartdevelopers.com\/blog\/wp-content\/uploads\/2022\/11\/c88db163a609df77f64bf421141e72ee.png\" alt=\"performing_arts\" width=\"20\" height=\"20\" \/>\u00a0 Use\u00a0custom icons\u00a0in the timeline.<\/li>\r\n<li><img loading=\"lazy\" decoding=\"async\" class=\"emoji\" src=\"https:\/\/webartdevelopers.com\/blog\/wp-content\/uploads\/2022\/11\/12b3ad3944a57462523499e523aade8d.png\" alt=\"muscle\" width=\"20\" height=\"20\" \/>\u00a0 Built with\u00a0Typescript.<\/li>\r\n<li><img loading=\"lazy\" decoding=\"async\" class=\"emoji\" src=\"https:\/\/webartdevelopers.com\/blog\/wp-content\/uploads\/2022\/11\/e3ce875299b4c625d4f4056c6f7b2840.png\" alt=\"art\" width=\"20\" height=\"20\" \/>\u00a0 Styled with\u00a0emotion.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p><strong><em>Compatible browsers:<\/em><\/strong> Chrome, Edge, Firefox, Opera, Safari<\/p>\r\n\r\n\r\n\r\n<p><strong><em>Responsive:<\/em><\/strong> Yes<\/p>\r\n\r\n\r\n\r\n<p><strong><em>Dependencies:<\/em><\/strong> &#8211;<\/p>\r\n\r\n\r\n<a href=\"https:\/\/github.com\/prabhuignoto\/react-chrono\/archive\/master.zip\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Download<\/span><\/a>\n\r\n\r\n<a href=\"https:\/\/github.com\/prabhuignoto\/react-chrono\" class=\"su-button su-button-style-default\" style=\"color:#ffffff;background-color:#000000;border-color:#000000;border-radius:40px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#ffffff;padding:0px 20px;font-size:16px;line-height:32px;border-color:#4d4d4d;border-radius:40px;text-shadow:none\"> Github Page<\/span><\/a>\n<!-- AddThis Advanced Settings generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"Author: Prabhu Murthy August 14, 2020 Made with: HTML \/ CSS \/ JS About the code: This is an amazing and cool Modern timeline component for React created using HTML, CSS and JS. Features: \u00a0Render timelines in three different modes (Horizontal,\u00a0Vertical,\u00a0Vertical-Alternating). \u00a0 Auto play the timeline with the\u00a0slideshow\u00a0mode. \u00a0\u00a0Display Images &amp; Videos\u00a0in the timeline with ease. \u00a0\u00a0Keyboard accessible. \u00a0\u00a0Render\u00a0custom content easily. \u00a0 Data driven API. \u00a0\u00a0Customize\u00a0colors with ease. \u00a0 Use\u00a0custom icons\u00a0in the timeline. \u00a0 Built with\u00a0Typescript. \u00a0 Styled with\u00a0emotion. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: Yes Dependencies: &#8211;<!-- AddThis Advanced Settings generic via filter on get_the_excerpt -->","protected":false},"author":1,"featured_media":28979,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1948],"tags":[8033,971,1950,5570],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/28978"}],"collection":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/comments?post=28978"}],"version-history":[{"count":2,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/28978\/revisions"}],"predecessor-version":[{"id":35369,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/posts\/28978\/revisions\/35369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media\/28979"}],"wp:attachment":[{"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/media?parent=28978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/categories?post=28978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webartdevelopers.com\/blog\/wp-json\/wp\/v2\/tags?post=28978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}