Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Is Ceres theme Apply on Exisitng React js Project


Is the Ceres theme applicable to existing React JS projects? If yes, then how will I apply for my project?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

Sorry for the late reply.

Unfortunately, at the moment Ceres doesn't have a React version out of the box.

You can apply Ceres theme to your existing React project, by following the steps below:


  1. Including the mandatory theme files globally:
    CSS files:

    /assets/plugins/global/plugins.bundle.css
    /assets/css/style.bundle.css


    Javascript files:

    /assets/plugins/global/plugins.bundle.js
    /assets/js/scripts.bundle.js

  2. In our HTML version, our components are initialized within the load event. However, in SPA versions, content is rendered differently, and to use our JavaScript components, you'll need to move the initialization from the load event to the useEffect hook.

    All components in HTML version are initialized in js/components/_init.js, you can move this initialization into useEffect as shown below:

    useEffect(() => {
    KTComponents.init();
    });

  3. Copy HTML markup from our HTML version to your React components.



By following the steps above you will have a basic theme core. Keep in mind that separate pages might require additional Javascript and CSS files to be loaded.

Regards,
Lauris Stepanovs,
Keenthemes Support Team
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(